私は常にうまく機能している、試行錯誤されたコードのビットを持っていますが、それを使って何か新しいことを試みています。私は体のスクロール位置を使用していませんが、代わりに#main
、auto のオーバーフローを持つ ID を持つ div があります。
私が抱えている問題は、(div の内側または外側から#main
) ページ リンクをクリックすると、ページは移動しますが、正しい位置に移動しないことです。この問題の原因は何ですか
$('.scrollto').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("#main:not(:animated)").animate({ scrollTop: destination} );
return false;
});
#main
の CSS は次のとおりです。
#main {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
z-index: 2;
overflow: auto;
overflow-x: hidden;
background: #fff;
-webkit-overflow-scrolling: touch;
}
編集
@Moje の助けを借りて、ここで問題を再現しました: http://codepen.io/anon/pen/xbLyJ
「Click me to go to Target 1」リンクをクリックします。そのセクション内に、ターゲット 2 に移動するための別のリンクが表示されます。それをクリックすると、正しい ID に完全に移動しません。同じリンクをクリックし続けると、そのたびにページが上下します。