javascript - JavaScript 将长页面滚动到 DIV

Question

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

有点像 EnsureVisible其他语言。

我已经检查过了scrollTop，scrollTo但它们看起来像红鲱鱼。

任何人都可以帮忙吗？

score 392 · Accepted Answer

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

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

还有什么更好的；根据 quirksmode 上的出色兼容性表，所有主流浏览器都支持此功能！

score 23 · Accepted Answer

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

score 22 · Accepted Answer

22

JQuery ScrollTo怎么样 - 请参阅此示例代码

于 2008-09-16T00:18:31.803 回答

score 15 · Accepted Answer

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

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

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

score 14 · Accepted Answer

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

此方法有详细的文档。

score 8 · Accepted Answer

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

score 7 · Accepted Answer

7

这对我有用

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

于 2016-12-20T07:31:19.847 回答

score 5 · Accepted Answer

此处发布的答案- 您的问题的相同解决方案。

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

score 4 · Accepted Answer

4

为什么不是命名锚？

于 2008-09-16T00:15:57.423 回答

score 4 · Accepted Answer

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

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

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

（在 FF3 和 Safari 3.1.2 上测试）

score 4 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

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

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

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

瞧！

score 1 · Accepted Answer

As stated already, Element.scrollIntoView() is a good answer. Since the question says "I have a link on a long HTML page..." I want to mention a relevant detail. If this is done through a functional link it may not produce the desired effect of scrolling to the target div. For example:

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);
}

Clicking on Scroll With Link will show the message on the console, but it would seem to have no effect because the # will bring the page back to the top. Interestingly, if using href="" one might actually see the page scroll to the div and jump back to the top.

One solution is to use the standard JavaScript to properly disable the link:

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

Now it will go to box12 and stay there.

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

干杯!

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

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

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

score 0 · Accepted Answer

对于平滑滚动，此代码很有用

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

score -2 · Accepted Answer

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

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

javascript - JavaScript 将长页面滚动到 DIV

18 回答 18

Related

Reference