JavaScript 滚动页面到指定元素位置

陈小峰_iefreer

于 2015-07-17 17:42:09 发布

阅读量8.7w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： html5 Javascript 文章标签： jquery html5 scroll

本文链接：https://blog.csdn.net/iefreer/article/details/46930467

html5 同时被 2 个专栏收录

85 篇文章

订阅专栏

Javascript

29 篇文章

订阅专栏

页面评论功能，当评论较多时，有时需要滚动到评论头部。

可以使用scrollTop方法，加上一点延时动画（animate），可访问在线演示，代码大体如下：

<html>
    <script src="//wow.techbrood.com/libs/jquery/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#scroll").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
	<ul id="commentlist">
		<li style="text-align: left">
		    <img src="" alt="">
		    <p class="name">iefreer</p>
		    <span class="time">2015-07-17 16:38:45</span>
		    <p class="comment_content">comment1</p>
		</li>
		<li style="text-align: left">
		    <img src="" alt="">
		    <p class="name">iefreer</p>
		    <span class="time">2015-07-17 16:38:25</span>
		    <p class="comment_content">comment2</p>
		</li>
		<li style="text-align: left">
		    <img src="" alt="">
		    <p class="name">iefreer</p>
		    <span class="time">2015-07-17 16:38:02</span>
		    <p class="comment_content">comment3</p>
		</li>
	</ul>
	<button id="scroll">Scroll me</button>
</html>

by iefreer