jqueryautoscroll

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

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

---

如果您只想转到页面上的相关部分，可以将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>

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

这个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');

});

---

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

您可以滚动到特定的div，如下所示：

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

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

---

您是想直接进入“关于我们”页面的该部分，还是想进入“关于我们”页面的顶部，然后滚动到相关部分？进入“关于我们”页面的顶部，然后滚动到相关部分我已更新了我的答案以与此匹配

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