Scrollto元素定义为$ this

Question

我有一个网格我正在研究这个界面是非常动态的，至少可以这么说。

我想要做的是关注$ this元素，无论它是否在点击时移到页面顶部或者回到它的原始位置网格。

当点击一个元素时会发生什么...它被发送到页面顶部，然后当它再次被点击时，它会回到网格中的原始位置。

所有元素都具有相同的类名，点击后单击的元素会触发所选的类名。所以我无法用scrolltop定位它。

所以我尝试过的是

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

但是它没有正常工作。它不会滚动到$ this，它会滚动到页面上的某个随机位置。

有更好的方法吗？

Answer 1

它不起作用，因为在同位素完成重新排列布局之前页面正在滚动。我做的是听了同位素事件arrangeComplete，然后我拨打了scrollTop而不是scrollTo。

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

demo

Answer 2

你在找这样的东西吗？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果没有更多信息，您似乎只是缺少对preventDefault()的调用。如果没有该调用，浏览器会尝试导航到href的{​​{1}}中定义的网址。

在下面的代码片段中，当我点击＆＃34; a＆＃34;旁边，比如，＆＃34; 11。＆＃34;它将11滚动到窗口的顶部。如果没有a的调用，它将滚动到Hello，包含在e.preventDefault()中，其ID为h1。

＆＃13;

＆＃13;

top

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;