I know how to navigate to a given anchor tag on a page - what I'm trying to do is link to a part of the page that is 30-40 pixels above the target anchor. The reason for this is that I have a bootstrap navigation that ends up covering part of the relevant content if I like directly to the part of the page with the anchor.
Currently I have this for the link:
%a{:href => root_path + "#how_it_works"} How It Works
and on the page it links to:
.span12#how_it_works
Any thoughts on how I can get the link to navigate to a section of the page that is slightly above the .span12#how_it_works?
You might be able to hack around this by adding some extra padding in your css, but the surest way to do this is with javascript:
$('a[href="#how_it_works"]').on('click',function(e){
// prevent normal scrolling action
e.preventDefault();
// grab the target url from the anchor's ``href``
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
window.scrollTo(0, target.offset().top - 50); // <-- our offset in px adjust as necessary
return false;
}
});
Here's codepen.
This uses a modified version of Chris Coyier's smooth scroll script. I've taken the "smoothness" out of the scrolling, but you could add it back in by animating the scrolltop like so:
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top + 20
}, 1000);
return false;
}
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