JavaScript 将长页面滚动到 DIV

Posted 2023-02-22

【中文标题】JavaScript 将长页面滚动到 DIV

【英文标题】：JavaScript to scroll long page to DIV

【发布时间】：2010-09-09 06:00:49

【问题描述】：

我有一个长 html 页面上的链接。当我点击它时，我希望页面另一部分的div 可以通过滚动进入视图在窗口中可见。

有点像其他语言的EnsureVisible。

我查看了 scrollTop 和 scrollTo，但它们看起来像红鲱鱼。

谁能帮忙？

【参考方案1】：

<button onClick="scrollIntoView()"></button>
<br>
<div id="scroll-to"></div>


function scrollIntoView() 
 document.getElementById('scroll-to').scrollIntoView(
      behavior: 'smooth'
 );

scrollIntoView 方法接受滚动选项来为滚动设置动画。

平滑滚动

document.getElementById('scroll-to').scrollIntoView(
          behavior: 'smooth'
 );

没有动画

document.getElementById('scroll-to').scrollIntoView();

【参考方案2】：

如前所述，Element.scrollIntoView() 是一个很好的答案。由于问题是“我在一个长的 HTML 页面上有一个链接......”我想提一个相关的细节。如果这是通过功能链接完成的，它可能不会产生滚动到目标 div 的预期效果。例如：

HTML：

<a id="link1" href="#">Scroll With Link</a>

javascript：

const link = document.getElementById("link1");
link.onclick = showBox12;

function showBox12()

  const box = document.getElementById("box12");
  box.scrollIntoView();
  console.log("Showing Box:" + box);

单击使用链接滚动 将在控制台上显示消息，但它似乎没有任何效果，因为# 会将页面带回顶部。有趣的是，如果使用href=""，实际上可能看到页面滚动到 div 并跳回顶部。

一种解决方案是使用标准 JavaScript 正确禁用链接：

<a id="link1" href="javascript:void(0);">Scroll With Link</a>

现在它将转到 box12 并停留在那里。

【参考方案3】：

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

查找您正在滚动到的元素的位置。 滚动到该位置。

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

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

它使用从 null 到 0 的强制转换，这在某些圈子中是不恰当的，但我喜欢它:) 第二部分使用 window.scroll。所以剩下的解决方案是：

function scrollToElement(elem) 
    window.scroll(0, absoluteOffset(elem));

瞧！

【讨论】：

你忘了设置第一个参数--window.scroll(0,absoluteOffset(elem));

【参考方案4】：

您可以使用上面提到的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

这个方法有详细的文档。

【参考方案5】：

这对我有用

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

【参考方案6】：

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

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

【讨论】：

在 Chrome 中完美运行。谢谢！

【参考方案7】：

为了平滑滚动，这段代码很有用

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

【参考方案8】：

我个人发现上面 Josh 的基于 jQuery 的答案是我见过的最好的，并且非常适合我的应用程序...当然，我已经使用 jQuery...我当然不会t 包含整个 jQ 库只是为了这个目的。

干杯！

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

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

与 jQuery 版本相比，这可以完美运行，并且代码少得多！我不知道 JS 中有一个名为 .scrollIntoView() 的内置函数，但它确实存在！因此，如果您想要精美的动画，请使用 jQuery。 Quick n'dirty...用这个！

【参考方案9】：

老问题，但如果有人通过谷歌找到这个（就像我一样）并且谁不想使用锚或 jquery；有一个内置的 javascriptfunction 可以“跳转”到一个元素；

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

还有什么更好的；根据 quirksmode 上的兼容性表，这是supported by all major browsers！

【讨论】：

根本不是流畅的滚动（至少在 Firefox 上），但它可以工作，只需要一行代码，没有第三方的东西。不错。

内置滚动进入视图的问题是，当查看长页面时，用户可能会在滚动页面时迷路。我编写了此功能的动画版本，它仅在需要时 滚动容器，并使用动画 执行此操作，因此用户可以实际看到发生了什么。之后也可以运行完整的功能。它类似于 scrollTo jQuery 插件，不同之处在于您不必提供可滚动的祖先。它会自动查找。

@Robert，听起来很棒。您能否提供一个链接或提供包含代码的答案？

这太简单了。

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

【参考方案10】：

如果我错了，请纠正我，但我一遍又一遍地阅读这个问题，仍然认为 Angus McCoteup 是在询问如何将元素设置为 position: fixed。

Angus McCoteup，查看http://www.cssplay.co.uk/layouts/fixed.html - 如果您希望您的 DIV 表现得像那里的菜单，请查看那里的 CSS

【参考方案11】：

如果您不想添加额外的扩展，下面的代码应该适用于 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;
        
    );

【参考方案12】：

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

【参考方案13】：

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

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

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

附加：对不起，我以为你想要一个单独的 div 从某个地方“弹出”（有点像这个网站有时会这样做），而不是将整个页面移动到一个部分。正确使用锚点可以达到这种效果。

【参考方案14】：

您需要的属性是 location.hash。例如： location.hash = '顶部'; //将跳转到命名锚“顶部”

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

（在 FF3 和 Safari 3.1.2 上测试）

【讨论】：

非常简单的解决方案...也适用于 IE6 和 IE8（未使用 IE7 测试）

这是迄今为止最好的答案；它简单、可靠且不需要库。 +1

【参考方案15】：

JQuery ScrollTo - see this sample code怎么样

【讨论】：

JQuery 不是 javascript 还是我们想从头开始编写所有库？我读到的问题是如何实现一个特定的功能，也许他想知道技术细节，但你不知道比我多。

@BjornTipling - 如果他想在这里查看 JavaScript，那就是demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

【参考方案16】：

答案已发布here - 与您的问题相同的解决方案。

编辑：如果你想要一个平滑的滚动，JQuery 的答案非常好——我以前没有看到过。

【参考方案17】：

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

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

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

【讨论】：

这个问题要求 javascript 完成同样的事情。

检查 Peter Boughton 在 ***.com/questions/66964 中的回答 - 给 div 一个 id 而不是使用命名锚点的工作方式相同，但具有更好的语义含义并且需要更少的标记。

正如斯科特在下面指出的那样：document.location.hash="myAnchor";

【参考方案18】：

为什么不用命名锚？

【讨论】：

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