javascript - 单击特定链接显示并滚动到

Question

我在同一页面上有很多很多指向不同 div 的链接。该 div 是隐藏的，通过单击链接，它会滚动到该 div 并显示。

示例 HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="first_div">
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
</div>

<p><a href="#first_div">see content with huge text</a></p>

例如:我在页面底部并单击其中一个链接，页面滚动到该链接并显示它(之前隐藏)。当然，不同的链接应该指向不同的 div。

Answer 1

首先为所有要隐藏的段落添加 Class 并设置 display:none css 属性。

设置事件后，点击链接，然后获取其href(指要显示的段落)，然后显示并滚动到该段落。

查看下面的代码片段可能会帮助您了解它是如何工作的:

$(document).ready(function(){
   $("a").click(function() {
      if(this.href.split("#")[1]) {
       
        var id= "#"+this.href.split("#")[1];
        
        $(id).fadeIn(2000);
        $('html, body').animate({
            scrollTop: $(id).offset().top
        } , 1000);
        
      }
    });
})

.hidden {
  display:none;
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p><a href="#first_div">see content with huge text</a></p>

<br><br><br><br><br><br><br><br><br><br>
Texts
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Div after will shown up <br><br>
<div class="hidden" id="first_div">
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
</div>