2016-09-03 5 views
0

私は1ページのウェブサイトを使用し、メニューボタンをクリックするといくつかのdivの上にスクロールします...しかし、固定ヘッダーのスクロールを使用しているため、 bodyタグのパディングのような100pxのトップのようにする必要がありますが、私は関数の中でページ上部から100px後にアイテムの上部までスクロールする必要があると言います。私が正しくあなたを理解していればクリックすると100pxの上にスクロールします

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){  
     event.preventDefault(); 
     var x = $(this.hash).offset().top; 
     $('html,body').animate({scrollTop:x},2000); 
    }); 
}); 
+0

'scrollTopスプライト:X ' - >' scrollTopスプライト:X - 100'? – yuriy636

+0

@Sarmaは私の答えをチェックしてください。 –

答えて

0

だけ追加100pxに$(this.hash).offset().topには、それを行います: はここに私のコードです。

オフセットはドキュメントに対してデータを取得しているためです。

最初の要素の現在の座標を取得するか、一致する要素のセット内のすべての要素の座標をドキュメントに対して設定します。 http://api.jquery.com/offset/

例:

jQuery(document).ready(function($) { 
 
    $(".scroll").click(function(event) { 
 
    event.preventDefault(); 
 
    var x = $(this).offset().top; 
 
    $('html,body').animate({scrollTop: x - 100 }, 2000); 
 
    }); 
 
});
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body style="height: 1000px; padding-top: 100px"> 
 

 
<div class="scroll">click to scroll to me</div> 
 
    
 
</body> 
 
</html>

+0

このスクリプトは動作を停止しました – Sarma

+0

@Sarma私はあなたのためにスニペットを書いています。私はあなたが解決しようとしていることを正確には知らないが、これはうまくいくようだ。私の仕事のために '' $(this.hash) ''を削除したことに注目してください。必要に応じて追加することができます。 –

+0

私はLOLを追加する必要はありません+ – Sarma

関連する問題