0

私は常にうまく機能している、試行錯誤されたコードのビットを持っていますが、それを使って何か新しいことを試みています。私は体のスクロール位置を使用していませんが、代わりに#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 に完全に移動しません。同じリンクをクリックし続けると、そのたびにページが上下します。

4

2 に答える 2

3

あなたの codepen の例を見て、エラーに気づきました。エラーは、実際のスクロール値を追加しなかったことです。簡単な例では、クリックして scrollTop の値が 0 の場合は正常に動作しますが、scrollTop の値が 0 でない場合、値はスクロールが 0 の場合destinationの値と同じではありません。destinationフォークされた例をここで見ることができます。また、haschange や URL リダイレクトを回避するために、 のevent.preventDefault()代わりにを使用することをお勧めします。return false;

于 2013-11-06T22:06:54.700 に答える