it-swarm.cn

用于将长页面滚动到DIV的JavaScript

我在一个很长的HTML页面上有一个链接。当我单击它时,我希望通过滚动到视图中,在窗口的另一部分上可以看到div

有点像EnsureVisible在其他语言中。

我已经检查了scrollTopscrollTo但它们看起来像是红色的鲱鱼。

有人可以帮忙吗?

94
Angus McCoteup

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

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

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

365
futtta

如果您不想添加额外的扩展,则以下代码应与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;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

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

15
mjallday

滚动的难点在于您可能不仅需要滚动页面来显示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);
  }
}
8
levik

这对我有用

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

答案张贴 这里 - 解决您的问题。

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

5
Chuck

为什么不是命名锚?

4
Bloodhound

您需要的属性是location.hash。例如:

location.hash ='top'; //会跳到命名锚“top

我不知道如何在不使用dojo或类似工具包的情况下进行Nice滚动动画,但是如果你只是需要它来跳转到锚点,location.hash应该这样做。

(在FF3和Safari 3.1.2上测试)

4
Scott Swezey

我无法在上面的futtta的回复中添加评论,但为了更顺畅的滚动使用:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
3
funnyfish

您可以使用上面提到的Element.scrollIntoView()方法。如果你没有参数,你将有一个即时丑陋滚动。为了防止您添加此参数 - behavior:"smooth"

例:

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

只需将scroll-here-plz替换为网站上的div或元素即可。如果您在窗口底部看到您的元素或者位置不是您所期望的,请使用参数block: ""。您可以使用block: "start"block: "end"block: "center"

请记住:始终在对象{}内使用参数。

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

该方法有详细的文档。

3
Smelino

为了顺利滚动,这段代码很有用

$('a[href*=#scrollToDivId]').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) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });
0
Swarnendu Paul

我个人发现Josh基于jQuery的答案是我见过的最好的答案,并且完美地适用于我的应用......当然,我已经 已经 使用jQuery ...我当然不会包括整个jQ图书馆只是为了这个目的。

干杯!

编辑:好的...发布这个仅仅几秒钟后,我看到另一个答案只是 下面 我(不确定在编辑后是否还在我之下)说要使用:

的document.getElementById( 'your_element_ID_here')scrollIntoView();

这比jQuery版本的代码要少得多!我不知道在JS中有一个名为.scrollIntoView()的内置函数,但它确实存在!所以,如果你想要花哨的动画,那就去jQuery吧。快点'脏......用这个吧!

0
Lelando

有一个 jQuery插件 用于滚动到DOM元素的一般情况,但如果性能是一个问题(什么时候不是?),我建议手动执行。这涉及两个步骤:

  1. 找到要滚动到的元素的位置。
  2. 滚动到该位置。

quirksmode 给出了前者背后机制的一个很好的解释。这是我的首选解决方案:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

它使用从null到0的转换,这在某些圈子中不是正确的礼仪,但我喜欢它:)第二部分使用window.scroll。所以解决方案的其余部分是:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

瞧!

0
Andrey Fedorov

scrollTop(IIRC)是文档中页面顶部滚动到的位置。 scrollTo滚动页面,使页面顶部位于您指定的位置。

你需要的是一些Javascript操作样式。假设您想要div屏幕并从右侧滚动,您可以将div的left属性设置为页面宽度,然后每隔几秒将其减少一定量,直到它到达您想要的位置。

这应该指向正确的方向。

附加:对不起,我以为你想要一个单独的div从某个地方'弹出'(有时像这个网站有的),而不是将整个页面移动到一个部分。正确使用锚可以达到这种效果。

0
Benjamin Autin