135

是否可以使用 jQuery 滚动到页面上的特定位置？

我想滚动到的位置是否必须：

<a name="#123">here</a>

或者它可以移动到特定的 DOM id 吗？

4

11 回答 11

243

jQuery 滚动插件

因为这是一个用jquery标记的问题，我不得不说，这个库有一个非常好的平滑滚动插件，你可以在这里找到它：http: //plugins.jquery.com/scrollTo/

文档摘录：

$('div.pane').scrollTo(...);//all divs w/class pane

或者

$.scrollTo(...);//the plugin will take care of this

用于滚动的自定义 jQuery 函数

您可以通过定义自定义滚动 jquery 函数来使用非常轻量级的方法

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

并像这样使用它：

$('#your-div').scrollView();

滚动到页面坐标

具有或属性的动画html和body元素scrollTopscrollLeft

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

纯javascript

滚动window.scroll

window.scroll(horizontalOffset, verticalOffset);

总结一下，使用window.location.hash跳转到有ID的元素

window.location.hash = '#your-page-element';

直接在 HTML 中（可访问性增强）

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>
于 2009-10-18T23:52:11.693 回答
129

是的，即使在纯 JavaScript 中也很容易。你给一个元素一个id，然后你可以把它用作一个“书签”：

<div id="here">here</div>

如果您希望它在用户单击链接时滚动到那里，您可以使用久经考验的方法：

<a href="#here">scroll to over there</a>

要以编程方式执行此操作，请使用scrollIntoView()

document.getElementById("here").scrollIntoView()
于 2009-10-18T23:47:06.710 回答
55

不需要使用任何插件，你可以这样做：

var divPosition = $('#divId').offset();

然后使用它将文档滚动到特定的 DOM：

$('html, body').animate({scrollTop: divPosition.top}, "slow");
于 2013-06-22T07:06:17.637 回答
21

这是一个纯 JavaScript 版本：

location.hash = '#123';

它会自动滚动。记得添加“#”前缀。

于 2009-10-18T23:49:55.473 回答
7

纯Javascript：

window.location = "#elementId"
于 2014-08-19T21:30:13.870 回答
6 
<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

此示例显示定位到特定的 div id，即在本例中为“idVal”。如果您有后续将通过 ajax 在此页面中打开的 div/表，那么您可以分配唯一的 div 并调用脚本以滚动到 div 的每个内容的特定位置。

希望这会有用。

于 2013-09-18T21:34:06.600 回答
4 
<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

于 2014-12-16T13:14:31.670 回答
1

尝试这个

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});
于 2016-12-06T12:10:41.683 回答
0

使用 jquery.easing.min.js，固定 IE 控制台错误

html

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

jQuery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });
于 2018-07-27T12:39:42.980 回答
0

这是@juraj-blahunka 的轻量级方法的变体。此功能不假定容器是文档，并且仅在项目不在视野范围内时滚动。动画队列也被禁用以避免不必要的反弹。

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};
于 2015-10-05T21:33:12.383 回答
0

您可以使用scroll-behavior: smooth;在没有 Javascript 的情况下完成此操作

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

于 2018-11-03T05:52:17.260 回答