JavaScript将长页面滚动到DIV

Question

我在一个很长的HTML页面上有一个链接.当我点击它时,我希望div通过滚动到视图中在页面的另一部分可见.

有点像 EnsureVisible其他语言.

我已经退房了scrollTop,scrollTo但它们看起来像是红色的鲱鱼.

有人可以帮忙吗？

Answer 1

旧的问题,但如果有人通过谷歌(我做)发现这个,谁不想使用锚点或jquery; 有一个内置的javascript函数可以"跳转"到一个元素;

document.getElementById('youridhere').scrollIntoView();

什么更好; 根据quirksmode上的强大兼容性表,所有主流浏览器都支持这一点!

Answer 2

如果您不想添加额外的扩展,则以下代码应与jQuery一起使用.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Answer 3

如何使用JQuery ScrollTo - 请参阅此示例代码

Answer 4

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

没有花哨的滚动,但它应该带你到那里.

Answer 5

滚动的难点在于您可能不仅需要滚动页面来显示div,而且您可能还需要在任意数量的级别上滚动可滚动的div.

scrollTop属性可用于任何DOM元素,包括文档正文.通过设置它,您可以控制滚动内容的距离.您还可以使用clientHeight和scrollHeight属性来查看需要多少滚动(当clientHeight(视口)小于scrollHeight(内容的高度)时可以滚动).

您还可以使用offsetTop属性来确定元素在容器中的位置.

要从头开始构建一个真正通用的"滚动到视图"例程,您需要从要显示的节点开始,确保它位于其父级的可见部分,然后为父级重复相同,所有直到你到达顶部的方式.

这一步看起来像这样(未经测试的代码,不检查边缘情况):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

Answer 6

这对我有用

document.getElementById('divElem').scrollIntoView();

Answer 7

您可以使用Element.scrollIntoView()上述方法。如果不带任何参数，将立即出现丑陋的滚动。为了防止这种情况，您可以添加此参数- behavior:"smooth"。

例：

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

只需在网站上替换scroll-here-plz为您的div或元素即可。并且，如果您在窗口底部看到元素，或者该位置不是您期望的位置，请使用parameter播放block: ""。您可以使用block: "start"，block: "end"或block: "center"。

切记：始终在对象{}中使用参数。

如果仍然有问题，请访问https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

有此方法的详细文档。

Answer 8

这里发布的答案- 与您的问题相同的解决方案

编辑:如果你想要一个平滑的滚动,JQuery答案是非常好的 - 我之前没有看到过这个.

Answer 9

为什么不命名锚点？