I'm trying to build a new trendy one page website where I scroll to a section on the page. I want to bring the "fixed" header to exactly where the content is. I am using the Zurb Foundation. This is what I have so far (some of the code found here):
<li><%= link_to "Recent Work", "#", "data-scroll" => "recent" %></li>
$(document).ready(function() {
$("a[data-scroll]").click(function() {
var id = $(this).data("scroll")
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
});
});
<div id="recent">some content</div>
Problem I have is stated above. I want to bring my fixed header to exactly where this div is placed on the page. Please advise.
The scrollTo method: The scrollTo() is used to scroll to the specified element in the browser.
click(function(event) { event. preventDefault(); $. scrollTo($('#myDiv'), 1000); });
Modern Browsers detect the hash in the url and then automatically open that part. So, if you want to scroll smoothly to that part instead, you first need to reset the scroll position to 0 and then add smooth scrolling. // direct browser to top right away if (window. location.
There's a plugin for that.
Or just roll your own.
If you need to offset the "roll your own" solution then try the following:
$("#button").click(function() {
var offset = 20; //Offset of 20px
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top + offset
}, 2000);
});
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