Question

我在JSFiddle上有以下代码

In [387]: np.genfromtxt(txt.splitlines(),names=True,dtype='U3,U3,i2,f4', usecols=[0,3,1,2])
Out[387]: 
array([('a', 'c', 23,  2.0999999), 
       ('b', 'd', 22,  2.       )], 
      dtype=[('A', '<U3'), ('D', '<U3'), ('B', '<i2'), ('C', '<f4')])

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        event.preventDefault();
      }
    }
  });
});

我想知道如何避免当您点击链接时它会自动滚动页面顶部的屏幕，而不是停留在显示隐藏div的相同位置。

由于

Answer 1

假设您要自动滚动以查看您刚刚未折叠的div的内容，请单击...

来自文档：“jQuery不支持获取隐藏元素的偏移坐标”。因此，最初您尝试滚动到的元素已折叠，无法使用.offset()确定其位置。

解决此问题的一种方法是将.animate()来电包裹在setTimeout()中，延迟时间为1。这有效地延迟了滚动，直到元素开始显示。

Answer 2

导致target元素尚未显示，因此target.offset().top为0。

等待隐藏的div通过监听shown.bs.collapse（由Boostrap，link解雇）来显示并滚动。

  if (target.length) {
    target.one('shown.bs.collapse', function() {        
       $('html, body').animate({
         scrollTop: target.offset().top
       }, 1000);
    });
    event.preventDefault();
  }

演示：https://jsfiddle.net/ddy3353q/5/

如何使链接在点击后不在首页滚动你？

2 个答案: