I need to create smooth scroll to IDs using jQuery.
Here is my code:
var $root = $('html, body');
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
Its working fine for me. But one thing, I need to stop scrolling at a certain point of the top of the page. For example 200px from the top.
At this stage its always scrolling to top of the page.
Can anybody tell me how to modify this code?
Thank you.
by adding this:
(($(href).offset().top >= 200 ) ? $(href).offset().top : 200)
It checks how far the element is away from the top, if its more than 200px it will scroll to it else it will scroll to 200px from the top
here is the new code:
var $root = $('html, body');
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: (($(href).offset().top >= 200 ) ? $(href).offset().top : 200)
}, 500, function () {
window.location.hash = href;
});
return false;
});
If i understood you correctly, you have something like header with height for example 200px and position:fixed to top. And your current script is scrolling too high, hiding hash title under the header.
So if this correct you just need to subtract header height from $(href).offset().top (e.g. scrollTop: $(href).offset().top-200)
jsFiddle
Change this line scrollTop: $(href).offset().top to scrollTop: $("body").offset().top + 200
This will take the really top position (0) and then you can manipulate your scrolling for position you need
Related
I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?
For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});
I have seen this problem on stackoverflow but the code that was used in there was different and I didn't really understood it. So I want to make website scroll to div when website is coming from another page.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top -70
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
This code works in homepage, scrolls smooth, but it does not work when it's clicked from another page.
This will scroll the body to the #someDiv top offset when page is loaded:
$(document).ready(function(){
$('html, body').animate({
scrollTop: $('#someDiv').offset().top - 70
}, 800);
});
and this if the referrer is not http://www.example.com:
$(document).ready(function(){
if (document.referrer !== "http://www.example.com") {
$('html, body').animate({
scrollTop: $('#someDiv').offset().top - 70
}, 800);
}
});
and this when comes from other page:
$(document).ready(function(){
if(document.referrer != '' && document.referrer != location.href ){
$('html, body').animate({
scrollTop: $('#someDiv').offset().top - 70
}, 800);
}
});
I tried to make the page scrollto a specific element with an id, and this works well:
var $target = $('#people');
var scrolltop = $target.offset().top - 50;
$('html, body').animate({ scrollTop: scrolltop }, 'slow');
Now, I am trying to get the $target from the url with the location.hash, but for some reason it doesn't work.
This is my code:
var $target = $(location.hash);
var scrolltop = $target.offset().top - 50;
$('html, body').animate({ scrollTop: scrolltop }, 'slow');
If I check the $target value is correct, but I receive this error:
Cannot read property 'top' of undefined.
Any idea why?
I had a bug with another piece of the script, that broke the code that worked correctly.
Anyway, I post the solution if somebody need something similar.
if (location.hash) {
// take the hash from the url
var sectionUrl = location.hash;
// disable anchor “jump” when loading a page
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
// "jump" to the div with the location hash
setTimeout(function(){
$('html, body').stop().animate({
scrollTop: $(sectionUrl).offset().top - 50
}, 2000);
}, 1000)
}
Just remove the space between "-" and "50"
Make it "-50"
Worked to mine, hope your's too.
I am trying to create smooth scrolling to IDs. When I click on a link its ID should be scroll to top (at a certain point of top. Ex: 200px from top) of the page.
I tried it something like this:
var $root = $('html, body');
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: (($(href).offset().top >= 200 ) ? $(href).offset().top : 200)
}, 500, function () {
window.location.hash = href;
});
return false;
});
But it doesn't work and its always scrolling to top of the page.
Hope somebody may help me out.
I guess, the problem is your href, the target will presumably not be found. Maybe you'd be better off to store the element to scroll to in a data attribute, like so:
$('a[href*=#]').click(function(evt) {
evt.preventDefault();
var target = $(this).data('target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
With an anchor tag like so:
Brilliant rainbow colors
Obviously, the element with the ID somewhere_over_the_rainbow must exist somewhere in your DOM.
This should do the job correctly :
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
var top = $(href).offset().top;
$('body').animate(
{
scrollTop: top - 200
},
500
);
return false;
});
Obviously, the item with the id equal to the hash of the anchor must exist.
At my page, i have a few booleans in my script, to check if the first screen is activated, and the same thing for the second screen. Screen 1 fills up the whole screen.
It looks something like this:
var headerLoaded = true,
contentLoaded = false;
When i scroll, i want the page to scroll automaticly to the 'content' area of my webpage. And i had this code for it:
$(window).scroll(function() {
if (($(window).scrollTop() > 0) && (!contentLoaded && headerLoaded)) {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 500, function() {
contentLoaded = true;
headerLoaded = false;
});
}
});
It checks if im not at the top of the page, and for the 2 booleans.
The function works great, but it's still calling the
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 500, function() {
contentLoaded = true;
headerLoaded = false;
});
part when i'm scrolled down to the 'content' div.
So everytime i scroll when im at the 'content' div, its scrolling back to the top of that.
Btw, both of the div's are absolute.
So, the animate is calling your original $(window).scroll(...) over and over.
Try telling your main scroll listener not to start animating if its already animating.
var animating = false;
$(window).scroll(function() {
if (!animating && $(window).scrollTop() > 0 && !contentLoaded && headerLoaded) {
animating = true;
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 500, function() {
animating = false;
contentLoaded = true;
headerLoaded = false;
});
}
});
wait.. i just read it..
You're just locking the screen at the content... why animate at all?
The answer I was giving was saying the animating the scroll will also trigger the main scroll, resulting in an endless loop... but what are you trying to do in the first place?