19

ページのセクションにスクロールする新しいトレンディな 1 ページの Web サイトを構築しようとしています。「固定」ヘッダーをコンテンツのある場所に正確に移動したい。Zurb Foundation を使用しています。これは私がこれまでに持っているものです(ここにあるコードの一部):

  <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 がページに配置されている場所に固定ヘッダーを正確に配置したいと考えています。お知らせ下さい。

4

2 に答える 2

32

そのためのプラグインがあります。

または、自分で巻いてください。

「独自のロール」ソリューションをオフセットする必要がある場合は、次のことを試してください。

$("#button").click(function() {
    var offset = 20; //Offset of 20px

    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top + offset
    }, 2000);
});
于 2013-04-13T18:32:39.920 に答える