Scroll to a specified div ONLY in bootstrap using Javascript - javascript

I am using simple Javascript to automatically scroll to a specific div within a page utilizing bootstrap.
$("button").click(function(){
$('html,body').animate({
scrollTop:$(".*specific div*").offset().top},
'slow')
});
It works like a charm for the first button, but the script seems to continue on and scroll to every specified div that the script directs toward. Is there any way to cause the script to go to only scroll to each specified div?
Thanks.

if i understand your question this is what you can do use anchor tag and add specfic div's id in href attribut
<a class="class-for-all-a" href="#about">About</a>
<div id="about"></div>
$('.class-for-all-a').click(function (event){
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
scrollTop:$("'#' + trgt").offset().top},'slow');
});

Related

Using a variable to set a ScrollTop with animate function

I have a series of divs that collapse and open and I'd like the browser to scroll to the top of the open divs.
I'm trying to do this using anchor links and having the anchor link saved in a variable "scrollClass" but my code is not working. When I test the console log however, it outputs exactly what I want it to output. I'm not sure if this is a syntax situation or not.
I'd appreciate any help that I can get here.
Thanks in advance.
<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) {
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate({scrollTop: $(scrollClass).offset().top - 100}, 450);
});
$('.discover-close, .discover-close a').click(function(e) {
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
});
</script>
You are setting attribute href to scrollClass and when you try to use it as an element it won't work. Try removing the attr("href") part and using the .offset then.
You could also just trigger the click on the anchor element you want to scroll to through jQuery.

jQuery smooth scrolling on a different webpage

I have managed to get the smooth scrolling working on a single page using the following code.
Note the HTML link is stored in a header.php and used across multiple pages below is a code snippet:
HTML Script:
<a class="item" href="index.php#contact">
<a name="contact"></a>
JS Script:
$('a[href="index.php#contact"]').click(function (e) { // user clicks on html link
e.preventDefault(); // prevent the default behaviour that occurs in the browser
var targetOffset = $('a[name="contact"]').offset().top; // define a variable to point at a particular section & offset from the top of browser
$('body').animate( // create animation
{ scrollTop: targetOffset }, 1000); // scrollTop property = target variable
});
Problem:
When I go to a different webpage and click the contact link it does not link back to the index.php#contact and scroll down to the contact anchor point.
Any assistance or advice is much appreciated I'm sure its a simple tweak in the code somewhere.
Check your href it's supposed to be: index.php/#contact

anchor href does not display properly

I am trying to navigate to another page section with anchor tag from current page /contact.html. The problem I am having here is that the result view do not correspond to the start of the container. Upon searching online, I suspect that it was because the web site components are dynamically loaded and do not have fixed height for the image slider.
Nonetheless, I did not find any solution to this problem yet. Hope someone can help me in this issue.
Note: The anchor tag work perfectly as it is if it is used in the index.html page itself.
For code reference and better illustrations, please refer to following link. This is exactly the problem I am facing.
Click here
Click here
Click here
As you said in comments, you have a fixed position on your header, so you need to calculate in JS your header height.
If you have jQuery:
$('a').on('click' function(){
var $link = $(location.href);
var position = $link.offset().top - $('#header').height()
$(window.animate({scrollTop: position},{duration: 500})
});
For onload with an anchor in the URL:
$(window).load(function() {
var $link = $(location.href);
if($link.length {
var position = $$link.offset().top - $('#header').height()
$(window.animate({scrollTop: position},{duration: 500})
}
});

How to scroll to a specifc element when there is already an # anchor on the url

I have a web site on based on SkelJS that currently loads a different part of the webpage by appending an #anchor to the url like this:
Note that #blog loads the blog page, the scroll is at the top. Inside the Blog page I need to scroll to a certain article. How can I use two anchors so that something like #blog#article_x would work? I suppose I have to look for a workaround since anchoring 2 ids makes no sense, is there a work around?
Additional notes:
Note that if a change #blog to #article_x it actually goes to the desired article however if someone shares the link it won't go to the article because it will look for #article_x on the homepage, where it does not exists.
Here is a demo of the template I'm using (http://html5up.net/uploads/demos/astral/#) note how the #anchor loads the desired page.
You can use a hash that contains both page and element. Then split and then do your page load then scroll, i.e. #blog,someelement
//on page load or wherever you detect the hash
$(function(){
var hash = window.location.hash;
var ele = null;
//Detect if there is a splitable hash
if(hash.indexOf(",") != -1){
var parts = hash.split(",");
hash = parts[0];
ele = jQuery("#"+parts[1]);
}
//whatever function you do to load the blog page
loadPage(hash,ele);
});
function loadPage(page,ele){
//do page loading
$("#page").load("http://someurl.com",function(){
//if there was no second part to the hash
//this will be skipped
if(ele){
$("html,body").animate({
scrollTop: ele.offset().top
},1000);
}
});
}
JSfiddle Demo
Considering the ID of the element that you want to scroll to is myelement you can use below jquery code to smoothly scroll to it.
$("html,body").animate({scrollTop : $("#myelement").offset().top},1000);
We can scroll to specific div when it has id or class
var $id=window.location.href.split('#')[1];
$('html, body').scrollTop($("#"+$id).offset().top)

How to add a text in a certain div when click in a link

This is my first incursion in jQuery so I am really newbie with this. I read the documentation (actually, I am still on it) to get to know it better!
The thing is that I have a website with several links into a li element and I want to achieve that every time I click in one of these links, a certain piece of text will appear in a div id="container" in the webpage.
How could I do this?
Quick, simple answer:
$('#yourlist li a').click(function(){
//grab link's href attribute
var href = $(this).attr('href');
//update content
$('#container').html("Loading page " + href + "...");
//load page via AJAX using link's href
$('#container').load(href);
});
I added more code to show how you would access the given link using $(this) and further load its href via AJAX.
$('li a').click(function(){
$('#container').html('Text you want to add');
});
try
<script src="your/downloaded/jquery/path.js></script>
<script>
$(document).ready(function() {
$('a#idOfLink').click(function() {
$("div#container").html("<span class='red'>Your certain text</span>");
});
})
</script>

Categories

Resources