Question

我有这个代码，当你打开一个链接时，它将滚动到该页面上的特定div。

collection.html

{'C9JVZ1': [], 'C9J872': ['nucleus', 'transcription factor complex', 'DNA binding', 'sequence-specific DNA binding RNA polymerase II transcription factor activity', 'transcription cofactor activity', 'mitotic cell cycle', 'regulation of transcription from RNA polymerase II promoter', 'transcription, DNA-templated'], 'C9JLN0': ['cytosol']}

的index.html

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

我的问题是每当我加载 index.html 时，它总是滚动到 moreInfo div。我想要的是当我在 collection.html 上点击关于链接时，它会重定向到 index.html 然后平滑滚动到 moreInfo div。

我会感激任何回答。

Answer 1

您可以通过在链接网址上设置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

执行此操作的简单方法是让链接指向位置哈希。

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

然后，在您的JavaScript中，您只需检查该人是否来自该链接。

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

打开一个链接并使用jQuery自动滚动到特定的div

3 个答案: