慢慢滚动到 html 页面中的特定 div 或锚点答案

【问题标题】：Slowly scroll to a specific div or anchor in a html page慢慢滚动到 html 页面中的特定 div 或锚点
【发布时间】：2016-02-01 12:31:13
【问题描述】：

我有一个 html 页面，我想让它慢慢滚动到特定点或页面周围。我尝试了以下代码，但没有任何效果：

<a href="#anchorName"></a>

<script>

function scrollTo(hash) 
{
    location.hash = "#anchorName";
}

</script>

其次，我尝试滚动到一个 div，但在这种情况下，我还必须使用 CSS 并放置一个高度。我试图避免这种情况。

从 stackoverflow 过去的问题中可以看出：

<a href="#myDiv" id="button">button</a>

<script>

    $("#button").click(function() 
    {
        $('html, body').animate({
            scrollTop: $("#myDiv").offset().top
        }, 2000);
    });

</script>

它根本不起作用。

【问题讨论】：

标签： javascript html scroll anchor autoscroll

【解决方案1】：

试试这样：

$(document).ready(function(){  
  $("#button").click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top
    }, 2000);
  });
});

#myDiv {
  margin-top: 800px;
  height: 50px;
  width: 300px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#myDiv" id="button">button</a>
<div id="myDiv"></div>

【讨论】：

它有效。是否可以更改速度并使其滚动慢一些？
当然。只需更改动画功能中的速度。实际上它的2000毫秒。因此，根据需要更改此值。
我尝试改变它，但没有任何改变。现在可以了。我需要刷新一下。

【解决方案2】：

由于您将#myDiv 设置为按钮的href，因此您必须在触发动画之前preventDefault()：

$("#button").click(function(e){
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="myDiv" id="button">button</a>
<div style="height:400px;"></div>
<div id="myDiv">Lorem Ipsum</div>

【讨论】：

【解决方案3】：

您可以按照示例代码使用 jQuery 平滑滚动到某个组件 id，例如：

<a class="move_to_div" href="#anchorName"> move div </a>


<div id="anchorName"> </div> 


<script>
 $(".move_to_div").click(function() {
  $('html, body').animate({
  scrollTop: $("#anchorName").offset().top
   }, 1000);
 });

</script>

这只是示例，当单击“a href 链接”时，向下滚动将是平滑的（为了测试结果，请使用 css 在链接和 div 之间添加一些空格）我希望这对你有帮助。

【讨论】：