显示隐藏的 div 并平滑滚动到隐藏 div 内的锚点答案

【问题标题】：show hidden div and smoothly scroll to anchor point within hidden div显示隐藏的 div 并平滑滚动到隐藏 div 内的锚点
【发布时间】：2015-01-12 15:47:24
【问题描述】：

我有许多隐藏的 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;
}

所以，我真正想知道是否可以在其中引入任何命令，以使其平滑/漂亮地滚动到锚点，而不仅仅是跳到锚点。 提前致谢。

【问题讨论】：

我忘了说，整个问题是让它滚动得很好，而不仅仅是跳到锚点。
欢迎来到 SO。请编辑您的问题以添加信息。在某些人找不到的评论中几乎没有帮助。
看起来您已经非常努力地做了几件 jQuery 或多或少开箱即用的事情。查看 show()、slideDown() 和 scrollTop() 的 api 文档。
谢谢isherwood，我已经尝试这些方法几天都没有成功，这是我发现的最成功的选择，它可能不是最好的选择，但如果有的话我真的不介意保留它只是我可以在那里引入的东西，它也可以让它平滑地滚动到锚点。有吗？
isherwood，我以前从未在这里提出任何问题，我希望现在能得到更多人的回答，我能做些什么来获得更多建议/答案吗？请回复。

标签： javascript jquery scroll show-hide

【解决方案1】：

您可以为滚动设置动画：

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

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

 }, 2000);

此外，您不能滚动到隐藏的 div，因为 display:none 将其从 DOM 中移除，而您实际上应该使用 visibility:hidden，因此您仍然可以使用锚点。

【讨论】：

嗨粘液，谢谢，使用我正在使用的代码，我可以滚动到任何隐藏的 div，但不能滚动到隐藏 div 内的锚点。它们需要 display:none，因为它们的内容很大，即使内容被隐藏，该内容仍会占用所有空间。