Jquery Autoscroll

Question

我有一个下拉菜单，其中包含多个列表项，如下所示

<li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="about_us.html" id="headbutton1">Heading1</a></li>
                            <li><a href="about_us.html" id="headbutton2">Heading2</a></li>
                            <li><a href="about_us.html" id="headbutton3">Heading3</a></li>
                        </ul>
                    </li>

在about_us.html文件中，我有以下这些

 <div class="row">
        <div class="col-md-12">
            <h2 class="text-center" id="headbutton1">Heading 1</h2>
            <p>Test 1.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center" id="headbutton2">Heading 2</h2>
            <p>Test 2.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center" id="headbutton3">Heading 1</h2>
            <p>Test 3.</p>
        </div>
    </div>

因此，当我单击菜单中的列表项(比如id=‘load 2’)时，我需要加载加载了相应部分(即id=‘headbutton2 2’)的about us页面。我使用以下jquery

$(document).ready(function () {

    var scrollPoint = $('#headbutton2').offset().top - 120;

        $('html, body').animate({
        scrollTop: scrollPoint
    }, 'slow');


});

Answer 1

如果您只想转到页面的相关部分，可以将trget添加到您的链接中，如下所示：

<ul class="dropdown-menu">
  <li><a href="about_us.html#headbutton1">Heading1</a></li>
  <li><a href="about_us.html#headbutton2">Heading2</a></li>
  <li><a href="about_us.html#headbutton3">Heading3</a></li>
</ul>

不需要滚动jQuery，因为该链接将直接将您发送到该部分。

如果您想首先在about_us页面上登陆，然后滚动到相关的部分，则会涉及到更多的内容，因此可以使用查询字符串。

<ul class="dropdown-menu">
  <li><a href="about_us.html?target=headbutton1">Heading1</a></li>
  <li><a href="about_us.html?target=headbutton2">Heading2</a></li>
  <li><a href="about_us.html?target=headbutton3">Heading3</a></li>
</ul>

这个jQuery：

$(document).ready(function () {

var q = document.URL.split('?')[1];
var target = q.split('=')[0] === 'target' ? '#' + q.split('=')[1] : '#';

    var scrollPoint = $(target).offset().top - 120;

        $('html, body').animate({
        scrollTop: scrollPoint
    }, 'slow');

});

注意:这段代码将适用于每一页，如果您希望查询字符串包含其他信息，则需要对其进行更改，但是如果您只是使用静态页面，则应该可以正常工作。

Answer 2

您可以滚动到以下特定的div：

   var scrollPoint = $("#myDiv").offset().top;
    $('html, body').animate({
        scrollTop: scrollPoint 
    }, 2000);

小提琴密码