JavaScript将长页面滚动到DIV

106

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

有点像 EnsureVisible其他语言。

我已经签出scrollTop，scrollTo但它们看起来像是鲱鱼。

有人可以帮忙吗？

javascript html

— ɢʀᴜɴᴛ
source

378

一个古老的问题，但是是否有人通过谷歌找到了（就像我一样），谁不想使用锚点或jQuery；有一个内置的javascript函数可以“跳转”到一个元素；

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

还有更好的选择；根据quirksmode上的出色兼容性表，这是所有主流浏览器支持！

— 富塔
source

2

根本无法流畅滚动（至少在Firefox上如此），但是它只用一行代码，没有第三方内容就可以工作。真好

— MatrixFrog 2010年

内置滚动视图的问题在于，当查看长页面时，滚动页面时用户可能会迷路。我已经编写了此功能的动画版本，该功能仅在需要时才滚动容器，并使用动画来做到这一点，以便用户可以实际看到发生了什么。之后，它也可以运行完整的功能。它类似于scrollTo jQuery插件，除了不必提供可滚动的祖先。它会自动寻找它。

— 罗伯特·科里特尼克

2

@Robert，听起来很棒。您可以提供链接还是提供包含代码的答案？

— 柯克·沃尔

这很简单。

— MeanMatt 2012年

4

对于寻求动画或平滑滚动的人们：document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });

— Khalil Laleh，

23

如果您不想添加额外的扩展名，则以下代码应与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;
        }
    });

— 乔希
source

22

JQuery ScrollTo如何-参见此示例代码

— 乔治·莫尔
source

24

JQuery不是JavaScript还是我们想从头开始编写所有库？我对问题的理解是如何实现特定功能，也许他想了解技术细节，但您对我的了解不多。

— 乔治·莫尔

4

@BjornTipling-如果他想在此处查看JavaScript，则为demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

— Norman H

15

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

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

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

— 星期一
source

该问题要求javascript完成同一件事。

— Scott Swezey

3

在stackoverflow.com/questions/66964中查看Peter Boughton的答案-给div一个ID而不是使用命名的锚点是相同的，但是具有更好的语义含义并且需要更少的标记。

— 尼克

正如scott所指出的：document.location.hash =“ myAnchor”;

— 亚伦·沃特斯

8

滚动的困难在于，您不仅需要滚动页面以显示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);
  }
}

— 列维克
source

8

您可以使用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

有此方法的详细文档。

— 斯梅利诺
source

7

这对我有用

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

— Xcoder
source

5

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

编辑：如果您想要平滑滚动，则JQuery答案非常好-我之前从未在实际操作中看到过。

— 卡盘
source

4

为什么不命名锚？

— 猎犬
source

嘿...我开始发布JavaScript解决方案，然后阅读您的...并拍了自己一巴掌。不错的工作！:-)

— Shog9年

4

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

location.hash ='top'; //将跳转到命名锚点“ top

不使用dojo或类似的工具包，我不知道如何制作漂亮的滚动动画，但是如果您只需要它跳到锚点，则location.hash应该可以做到。

（在FF3和Safari 3.1.2上测试）

— 斯科特·斯威兹（Scott Swezey）
source

1

伟大的简单解决方案...也可用于IE6和IE8（未经IE7测试）

— ckarras

2

到目前为止，这是最好的答案。它简单，可靠并且不需要库。+1

4

我无法在上面的futtta回复中添加评论，但为了使滚动更流畅，请使用：

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

— 有趣的鱼
source

在Chrome中完美运行。谢谢！

— 艾尔·贝蒙多

0

scrollTop（IIRC）是页面顶部滚动到文档中的位置。scrollTo滚动页面，以使页面顶部位于您指定的位置。

您需要的是一些Javascript操纵的样式。假设您要在屏幕外显示div并从右侧滚动，则可以将div的left属性设置为页面的宽度，然后每隔几秒钟将div属性减小一个设定值，直到到达所需位置为止。

这应该为您指明正确的方向。

另外：对不起，我以为您希望一个单独的div从某个地方“弹出”（有时像本网站那样），而不要将整个页面移到某个部分。正确使用锚点将达到这种效果。

— 本杰明·奥丁（Benjamin Autin）
source

0

对于滚动到DOM元素的一般情况，有一个jQuery插件，但是如果性能是一个问题（什么时候不是？），我建议您手动进行。这涉及两个步骤：

查找要滚动到的元素的位置。
滚动到该位置。

quirksmode很好地解释了前者背后的机制。这是我的首选解决方案：

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

它使用从null到0的转换，这在某些圈子中不是适当的礼节，但我喜欢它：)第二部分使用window.scroll。因此，其余解决方案是：

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

瞧！

— 安德烈·费多罗夫（Andrey Fedorov）
source

您忘记设置第一个参数-window.scroll（0，absoluteOffset（elem））;

— 理查德

0

我个人发现上面的Josh基于jQuery的答案是我所看到的最好的答案，并且完美地适合我的应用程序……当然，我已经在使用jQuery……我当然不会包括整个jQ库。一个目的。

干杯!

编辑：好的...发布此消息后仅几秒钟，我在我的下方看到了另一个答案（不确定是否在编辑后是否仍在我下方），说可以使用：

document.getElementById（'your_element_ID_here'）。scrollIntoView（）;

与jQuery版本相比，它可以完美地工作，并且用更少的代码！我不知道JS中有一个名为.scrollIntoView（）的内置函数，但是确实有！因此，如果您想要精美的动画，请使用jQuery。快n'脏...使用这个！

— 利兰多
source

0

为了顺利滚动，此代码很有用

$('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;
      }
    }
  });

— 斯瓦南杜保罗
source

-2

如果我错了，请纠正我，但是我一次又一次地阅读问题，但仍然认为Angus McCoteup在问如何将元素设置为位置：固定。

Angus McCoteup，请访问http://www.cssplay.co.uk/layouts/fixed.html-如果您希望DIV像菜单一样运行，请查看CSS

— 维塔利·沙罗瓦托夫（Vitaly Sharovatov）
source