javascript - クリックしてスクロールトップ jqueryを使用していくつかのピクセル

Question

同じページの特定の場所を読み込もうとしています。しかし、問題は、ヘッダーが位置の上に固定されていることです。リンクをクリックすると、ヘッダーがヘッダーの後ろに移動します。そのため、一部のコンテンツを表示できません。このFiddleにアクセスしてください。私が言おうとしていることは理解できます。と を追加するのは好きではpaddingありませんmargin。

Answer 1

あなたはあなたのを変更したいかもしれませんHTML。id1ページに1つしか存在できません。

与えられたフィドルでは、あなたは繰り返しを持っています<div id="one">

さて、スクロールを機能させるために、あなたはこのようなことをすることができます：

$(document).ready(function(){
    $("a").click(function(e) {
        e.preventDefault();
        var hash = $(this).attr("href");
        //console.log($(hash).position().top);
        $('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);

    });
});

ここでページ上$(hash).position().topのの位置を取得し、divそこから50を引きます（固定divの高さ）。

これがフィドルです </p>