Question

我有许多隐藏的div（在正常的站点布局中），我一次只显示一个，在所有情况下，屏幕滚动到那些特定的div。这段代码效果很好，但是我想要打开隐藏的div并滚动到该div中的锚点。

我似乎无法忘记做到这一切的事情。在这种情况下，它只会到达隐藏div的顶部。

var holder = "";

function toggleDiv(id) {

  if (holder != "") {
    document.getElementById(holder).style.display = 'none';
  }

  document.getElementById(id).style.display = 'block';
  holder = id;

  var startY = currentYPosition();
  var stopY = elmYPosition(id);
  var distance = stopY > startY ? stopY - startY : startY - stopY;
  if (distance < 100) {
    scrollTo(0, stopY);
    return;
  }
  var speed = Math.round(distance / 100);
  if (speed >= 10) speed = 10;
  var step = Math.round(distance / 25);
  var leapY = stopY > startY ? startY + step : startY - step;
  var timer = 0;
  if (stopY > startY) {
    for (var i = startY; i < stopY; i += step) {
      setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
      leapY += step;
      if (leapY > stopY) leapY = stopY;
      timer++;
    }
    return;
  }
  for (var i = startY; i > stopY; i -= step) {
    setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
    leapY -= step;
    if (leapY < stopY) leapY = stopY;
    timer++;
  }

  return false;

}

我也有这个让整个滚动工作：

function currentYPosition() {
  // Firefox, Chrome, Opera, Safari
  if (self.pageYOffset) return self.pageYOffset;
  // Internet Explorer 6 - standards mode
  if (document.documentElement && document.documentElement.scrollTop)
    return document.documentElement.scrollTop;
  // Internet Explorer 6, 7 and 8
  if (document.body.scrollTop) return document.body.scrollTop;
  return 0;
}

function elmYPosition(id) {
  var elm = document.getElementById(id);
  var y = elm.offsetTop;
  var node = elm;
  while (node.offsetParent && node.offsetParent != document.body) {
    node = node.offsetParent;
    y += node.offsetTop;
  }
  return y;
}

所以，我真正想知道的是，我是否可以在那里引入任何命令，以便它能够顺利地/好地滚动到锚点而不是仅仅跳转到它们。 提前谢谢。

Answer 1

您可以为滚动设置动画：

$('html,body').animate({

    scrollTop: $('#yourTarget').offset().top

 }, 2000);

此外，您无法滚动到隐藏的div，因为当您实际使用display:none时，visibility:hidden会将其从DOM中删除，因此您仍然可以使用锚点。< / p>

显示隐藏的div并平滑地滚动到隐藏div中的锚点

1 个答案: