Question

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

我想要滚动的位置是否必须包含：

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

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

Answer 1

jQuery Scroll Plugin

因为这是一个用 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属性

为scrollTop和scrollLeft个元素添加动画效果

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

Answer 2

是的，即使在普通的JavaScript中也很容易。您为元素提供了一个id，然后您可以将其用作“书签”：

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

如果您希望在用户点击链接时滚动它，您可以使用经过验证的方法：

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

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

document.getElementById("here").scrollIntoView()

Answer 3

没有必要使用任何插件，你可以这样做：

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

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

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Answer 4

这是一个纯粹的javascript版本：

location.hash = '#123';

它会自动滚动。请记住添加“＃”前缀。

Answer 5

普通Javascript：

window.location = "#elementId"

Answer 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'。如果您有后续的div /表将通过ajax在此页面中打开，那么您可以分配唯一的div并调用脚本滚动到div的每个内容的特定位置。

希望这会有用。

Answer 7

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

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

Answer 8

试试这个

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

$(document).ready(function() {
location.hash = "divRegister";
});

Answer 9

以下是@ juraj-blahunka＆lt; strong>轻量级方法的变体。此函数不假定容器是文档，只有在项目不在视图时才滚动。动画排队也被禁用以避免不必要的弹跳。

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

Answer 10

使用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();
            });
        });

Answer 11

您可以使用scroll-behavior: smooth;来完成此操作而无需使用Javascript

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

如何使用jquery滚动到页面上的特定位置？

11 个答案: