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 =＆＃39; headbutton2＆＃39;）时，我需要加载带有相应部分的about us页面（即id =＆＃39; headbutton2＆＃39;）已加载。我使用以下jquery

$(document).ready(function () {

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

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


});

Answer 1

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

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

Fiddle Code

Jquery Autoscroll

2 个答案: