$ thisとして定義されているScrollto要素

Question

グリッドを持っています。

私がしようとしているのは、クリックしてページの上部に移動しても、グリッド内の元の場所に戻っても、$ this要素に焦点を当てます。

要素がクリックされると、ページの上部に送信され、再びクリックされるとグリッドの元の場所に戻ります。

すべての要素は同じクラス名を持ち、クリックするとクリックされた要素が選択したクラス名をトリガーします。だから私はスクロールトップでそれを本当に目標にすることはできません。

それでは、私が試したことは

$container.find('a').click(function() { 
var $this = $(this), 
    $photo = $this.parents('.photo'); 
    $('html, body').animate({scrollTop: $this.offset().top}); 

である。しかし、それは正常に動作していません。これは$ thisにスクロールせず、ページ上の任意の場所にスクロールします。

良いアプローチがありますか？

Answer 1

同位体は、再配置レイアウトを終えする前に、ページがスクロールされていたので、それは働いていませんでした。私がしたことは、同位体イベントarrangeCompleteを聞いた後、scrollToの代わりにscrollTopと呼んだ。

$container.one('arrangeComplete',function(){ 
    $('body').animate({scrollTop: $this.offset().top}); 
}); 

demo

Answer 2

このようなものをお探しですか？より多くの情報がない

$("a[href^='#']").on("click", function(e) { 
 
    $("html, body").animate({ 
 
    scrollTop: $($(this).attr("href")).offset().top 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="top">Top</h1> 
 
<a href="#1">Scroll to id 1</a> 
 
<a href="#2">Scroll to id 2</a> 
 
<a href="#3">Scroll to id 3</a> 
 
<a href="#4">Scroll to id 4</a> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<div id="1">ID 1</div> 
 
<a href="#top">Back to top</a> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<div id="2">ID 2</div> 
 
<a href="#top">Back to top</a> 
 
<br> 
 
<br> 
 
<br> 
 
<div id="3">ID 3</div> 
 
<a href="#top">Back to top</a> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<div id="4">ID 4</div> 
 
<a href="#top">Back to top</a>

Answer 3

あなただけのpreventDefault()への呼び出しを欠いているかのように、それが表示されます。この呼び出しがなければ、ブラウザはaのhrefに定義されているURLにナビゲートしようとします。

次のスニペットで、「11」の横にある「a」をクリックすると、そのウィンドウをウィンドウの上部にスクロールします。 e.preventDefault()への呼び出しがなければ、topのIDを持つh1にラップされたHelloにスクロールします。

$(function() { 
 
    var $container = $('.container'); 
 
    $container.on('click', 'a', function(e) { 
 
    e.preventDefault(); 
 
    var $this = $(this); 
 
    $('html, body').animate({ 
 
     scrollTop: $this.offset().top 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="top">Hello</h1> 
 
<ol class="container"> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
    <li><a href="#top">a</a></li> 
 
</ol>