备案 控制台
学习
实践
活动
专区
工具
TVP
写文章
专栏首页 全栈程序员必看 JavaScript 滚动页面到指定元素位置[通俗易懂]
2 0

海报分享

JavaScript 滚动页面到指定元素位置[通俗易懂]

大家好,又见面了,我是全栈君。

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

能够使用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 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 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>
	<button id="scroll">Scroll me</button>
</html>

by iefreer

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/115738.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客: 复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。