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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • origin双y轴柱状图_双Y轴柱状图和折线图

    origin双y轴柱状图_双Y轴柱状图和折线图Origin双Y轴柱状图画法及两柱重合有间居问题解决1、所遇问题2、作图方法1、所遇问题做双Y轴柱状图时,一开始是将左Y轴数据和右Y轴数据放在了两个sheet中,一顿操作最后发现两个柱要么重合要么有间距,怎么调都不行,就像下图这样。。。2、作图方法正确作图方法:1、将X数据左Y数据以及右Y数据放在一个sheet中,主要这里边的两个空列,是正确画图的关键。2、选择ABCD四列画柱状图,注意这里C列为误差,画出来图你就明白D列作用是让柱子向左偏一格。3、点击空白区域,右键加入右Y轴,也

  • 2018年又传喜报!热烈祝贺王家林大师大数据经典著作《Spark SQL大数据实例开发教程》 畅销书籍 出版上市![通俗易懂]

    2018年又传喜报!热烈祝贺王家林大师大数据经典著作《Spark SQL大数据实例开发教程》 畅销书籍 出版上市![通俗易懂]2018年又传喜报!热烈祝贺王家林大师大数据经典著作《SparkSQL大数据实例开发教程》畅销书籍出版上市!作者:王家林段智华 条码书号:9787111591979出版日期:2018/3/1出版社:机械工业出版社丛书名:大数据科学丛书定价:¥59.00        SparkSQL是Spark生态环境中核心和基础的组件,是掌握Spark的关键所在。本书完全从企业级开发的角度出…

  • Robots.txt – 禁止爬虫

    Robots.txt – 禁止爬虫

  • ziw文件用什么打开_html文件怎么打开

    ziw文件用什么打开_html文件怎么打开方法1:.ziw格式文件是为知笔记的文本文档,可以用为知笔记打开,直接去为知笔记官方网站下载就可以了,然后该软件的试用期是100天,不过它是经过邮箱注册的,并且没有验证邮箱这一步,所以你在100天之后可以换一个邮箱就可以了,比如之前用QQ邮箱,下次用163邮箱,另外它不会验证邮箱,所以你可以随意伪造一个邮箱登录方法2:直接把文件名后缀名改成.zip,然后解压,解压成功之后生成的是html网页,直接点击index.html就可以在浏览器中打开文件了,里面的图片不要删除,它们是index.html网页要用

    2022年10月12日
  • 对于三极管饱和状态的理解「建议收藏」

    对于三极管饱和状态的理解「建议收藏」对于三极管饱和状态的理解https://zhidao.baidu.com/question/172715750.html问题来源对于三极管饱和状态的理解三极管如工作在饱和状态也就是开的状态,那么就是双结正偏这是书上的解释我自己的理解是这样的:饱和状态和从放大状态转变过来的,极电结和发射结正偏是结果,而不是原因就是说,三极管首先工作在放大状态,极电结反偏,发射结正偏当基级电流增大时,一直增大到三极管的非线性区(这里指的是饱和区),注意,在这一瞬间偏置情况并未改变,也就是说依然是极电结反偏,

  • [算法]-最短路径算法总结「建议收藏」

    [算法]-最短路径算法总结「建议收藏」Dijkstra最短路径算法按路径长度的递增次序,逐步产生最短路径的贪心算法基本思想:首先求出长度最短的一条最短路径,再参照它求出长度次短的一条最短路径,依次类推,直到从顶点v到其它各顶点的最短路径全部求出为止。时间复杂度为O(n2)算法流程:首先选定源点1,建立邻接矩阵C[5][5],初始化三个数组分别为D[n],P[n],S[n],分别用来存储从源点到对应点的最短距离和最短路…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号