jQuery滚动到页面的一部分 [英] jQuery Scroll To Section of Page

问题描述

我正在尝试建立一个新的时尚单页网站，我滚动到页面上的一个部分。我想把固定标题带到内容的确切位置。我正在使用Zurb基金会。这是我到目前为止（这里找到的一些代码）：

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>

我所遇到的问题如上所述。我想把我的固定标题带到这个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.

推荐答案

有一个插件。

或者只是滚动自己。

如果您需要抵消自己动手的解决方案，请尝试以下方法：

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);
});

这篇关于jQuery滚动到页面的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！