JavaScript 将长页面滚动到 DIV

IT技术 javascript html
2021-01-14 05:08:45

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

有点像 EnsureVisible其他语言。

我已经退房scrollTop，scrollTo但它们看起来像红鲱鱼。

任何人都可以帮忙吗？

6个回答

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

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

还有什么更好的？根据 quirksmode 上很好的兼容性表，所有主要浏览器都支持！

这样做的简单性很棒。
2021-03-17 05:08:45
对于寻找动画或平滑滚动的人： document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });
2021-03-20 05:08:45
内置滚动进入视图的问题在于，在查看长页面时，用户可能会在滚动页面时迷路。我已经编写了此功能的动画版本，仅在需要时滚动容器，并使用动画进行滚动，以便用户可以实际看到发生了什么。它也可以在之后运行一个完整的功能。它类似于scrollTo jQuery 插件，但您不必提供可滚动的祖先。它会自动查找。
2021-03-29 05:08:45
@罗伯特，这听起来很棒。您能否提供链接或提供包含代码的答案？
2021-04-03 05:08:45
根本不是平滑的滚动（至少在 Firefox 上）但它可以工作，只需一行代码，没有第三方的东西。好的。
2021-04-14 05:08:45

如果您不想添加额外的扩展，以下代码应该适用于 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;
        }
    });
@BjornTipling - 如果他想在这里看到 JavaScript，它是demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js
2021-03-16 05:08:45
JQuery 不是 javascript 还是我们想从头开始编写所有库？我对这个问题的理解是如何实现一个特定的功能，也许他想知道技术细节，但你比我更不知道。
2021-03-24 05:08:45 
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

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

这个问题要求 javascript 来完成同样的事情。
2021-03-21 05:08:45
在stackoverflow.com/questions/66964 中检查 Peter Boughton 的回答- 给 div 一个 id 而不是使用命名锚点的工作原理相同，但具有更好的语义含义并且需要更少的标记。
2021-04-10 05:08:45
正如斯科特在下面指出的那样：document.location.hash="myAnchor";
2021-04-13 05:08:45

您可以使用Element.scrollIntoView()上面提到的方法。如果你在里面不带任何参数，你会立即看到一个丑陋的 scroll。为了防止这种情况，您可以添加此参数 - 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

有此方法的详细文档。

其它你可能感兴趣的问题
上一篇如何确定 jQuery 中窗口的高度和滚动位置？ 下一篇获取元素的 jQuery 选择器