Question

我在页面中有此内容在某些操作上，我想使用javascript / jquery滚动到ID＃。例如，在按钮上单击将id6 div滚动到DIV而不是页面顶部。

此代码不起作用

$('#id5').scrollTop($("#id5")[0].scrollHeight);

<div id="t1" style="height: 300px; overflow-y: auto; overflow-x: hidden;">
<div id="id1">What is Lorem Ipsum?</div>
<div id="id2">What is Lorem Ipsum?</div>
<div id="id3">What is Lorem Ipsum?</div>
<div id="id4">What is Lorem Ipsum?</div>
<div id="id5">What is Lorem Ipsum?</div>
<div id="id6">What is Lorem Ipsum?</div>
so on....
</div>

Answer 1

每个div元素的高度应足够大以达到滚动效果，否则您将看不到任何内容。查看下面的代码，您将了解其工作原理。

$(document).ready(function(){

  $(".scroll").click(function(e){
        e.preventDefault();
        var hash = this.hash;
        $("html,body").animate({
          scrollTop: $(hash).offset().top
        }, 800);
  })

});

ul > li{ list-style:none; }
.box{ height:500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
 <div class="box" id="cl1">
   <a class="scroll" href="#cl2">Click Here</a>
 </div>
</li>
<li>
 <div class="box" id="cl2">
   <a class="scroll" href="#cl1">Click Here</a>
 </div>
</li>
</ul>

滚动到溢出div中的内容

1 个答案: