打开 link 并使用 jQuery 自动滚动到特定的 div

Question

我有这段代码，当您打开 link 时，它会滚动到该页面上的特定 div。

collection.html

<a id='about' href="index.html">about</a>

index.html

<div id='#moreInfo>contents here</div>

<script>
   $(document).ready(function(){
          $('html, body').animate({
             scrollTop: $("#moreInfo").offset().top
           }, 1000);
   })
</script>

我的问题是每当我加载 index.html 时，它总是滚动到 moreInfo div。我想要的是当我在 collection.html 上并单击 about link 时，它将重定向到index.html 然后平滑地滚动到 moreInfo div。

如有任何答复，我将不胜感激。

Answer 1

您可以通过在 link URL 上设置 GET 参数然后在下一页加载时读取该参数来实现：

collection.html

<a id='about' href="index.html?scrollTo=moreInfo">about</a>

index.html

<script>
   $(document).ready(function(){
          var scrollTo = getParameterByName('scrollTo');
          if(scrollTo!=''){
              $('html, body').animate({
                 scrollTop: $("#"+scrollTo).offset().top
               }, 1000);
          }
   });

   function getParameterByName(name) {
        name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
        var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
</script>

Answer 2

一个简单的方法就是让您的 link 指向一个位置散列。

<a id='about' href="index.html#moreInfo">about</a>

然后，在您的 JavaScript 中，您可以检查此人是否来自 link。

   $(document).ready(function(){
      if (window.location.hash == "#moreInfo") {
        $('html, body').animate({
           scrollTop: $("#moreInfo").offset().top
         }, 1000);
      }
   });

Answer 3

仅使用 html 即可实现平滑滚动

您的页面包含 div 个赞

<div id="sample">
</div>

您必须使用

滚动到此div

<a href="#sample">click here to scroll</a>

并且只需在 css

中使用以下代码

<style>
    html {
        scroll-behavior: smooth;
    }

</style>

打开 link 并使用 jQuery 自动滚动到特定的 div

Open a link and autoscroll to specific div using jQuery

javascript

jquery

html

autoscroll