This should be a pretty basic question, but i've thrown most of my morning at it, and at this point I'm close to throwing in the towel. I have not even a little bit of js foo -- but I found a nicely commented chunk of code that I'm hoping to use to animate anchor links it is:
$(document).ready(function() {
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump
var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top;
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({ scrollTop: scrollToPosition}, 600, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
I'm trying to get it to land 30px above the offset().top -- I tried
$('html, body').stop().animate({ scrollTop: scrollToPosition -30}, 600,
Which almost works -- it goes to the right place but then bounces back.
I've also tried
scrollTop: $(target).offset().top - 20 },
I've also tried
scrollTop: $(hash).offset().top + $('#access').outerHeight()
Which doesn't seem to change anything.
It seems like the answer might be here: JQuery page scroll issue with fixed header but I just can't quite seem to get it.
I know this is similar to other questions -- but I've gone through what I could find and I'm illiterate enough that I haven't been able to copy/paste in anything that fixes the issue.
I'd be incredibly grateful for a solution.
Many thanks,
Martin
PS
This other chunk of code I found does work but it's stripping the hashtag out, which makes it mostly useless.
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset - 30}, 1000);
return false;
}
}
});
});
EDITED:
You just need to detect the height of the fixed header and subtract that from the scrollToPosition
which you were doing correctly. The issue is the window.location.hash = "" + target;
jumps the page to top of the element with that id. So if you animate there like you were doing and then change to that hash it will "bounce back" like you described. Here is the first way we can combat this:
// Get the height of the header
var headerHeight = $("div#header").height();
// Attach the click event
$('a[href*=#]').bind("click", function(e) {
e.preventDefault();
var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top - headerHeight;
$('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){
window.location.hash = "" + target;
// This hash change will jump the page to the top of the div with the same id
// so we need to force the page to back to the end of the animation
$('html').animate({ 'scrollTop': scrollToPosition }, 0);
});
$('body').append("called");
});
Here's a new jsfiddle for this first method: http://jsfiddle.net/yjcRv/1/
FURTHER EDIT: An even better way to control hash change events is to use a plugin like jQuery Address. With this you can utilise your hashchange events much more. Here's an example usage:
// Get the height of the header
var headerHeight = $("div#header").height();
$.address.change(function(evt){
var target = "#" + evt["pathNames"][0]; //Get the target from the event data
// If there's been some content requested go to it…else go to the top
if(evt["pathNames"][0]){
var scrollToPosition = $(target).offset().top - headerHeight;
$('html').animate({ 'scrollTop': scrollToPosition }, 600);
}else{
$('html').animate({ 'scrollTop': '0' }, 600);
}
return false;
});
// Attach the click event
$('a').bind("click", function(e) {
// Change the location
$.address.value($(this).attr("href"));
return false;
});
Live example here: http://www.vdotgood.com/stack/user3444.html
NOTE: You don't need to add the hash to your links href attribute now. Here's a link that you could target with a jQuery selector:
<!-- This is correct -->
<a href="/target" class="myclass">Target</a>
<!-- These are incorrect -->
<a href="/#/target" class="myclass">Target</a>
<a href="#/target" class="myclass">Target</a>
To target this link you'd use a selector like:
$("a.myclass").click(function(){
$.address.value($(this).attr("href"));
return false;
});
jQuery Address does in fact look for links that have the following attribute:
<a href="/target" rel="address:/target">Target</a>
The rel
attribute here contains address:
followed by a relative url defined by you in this case /target
. If you use this, jQuery Address will detect the link and fire the hash change event automatically.
I know this is an old question (kind of) but I ran into a similar problem with a fixed dropdown navigation on a website. Note this is a smooth scroll code snippet, though you could easily make it automatic by changing the animation speed.
jQuery:
$('body').on('click','a[href^="#"]',function(event){
event.preventDefault();
var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
//change this number to create the additional off set
var customoffset = 75
$('html, body').animate({scrollTop:target_offset - customoffset}, 500);
});
I have used this chunk of code for a long time without any issues. The only thing I dislike about it, is it will grab ANY # tag. So in a plugin like Flexslider plugin where the navigation uses #'s I manually strip them from the plugin.
I have tweaked the original script from http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery. It works marvels but you cannot set a delay as it is.
var headerHeight = $("header").height();
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - headerHeight
}, 1200, 'swing', function () {
window.location.hash = target ;
});
});
});
Yes, I'm a bit late but this problem just occurred to me... Cheers!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With