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

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【STL】关联容器 — hash_set

    【STL】关联容器 — hash_set

    2021年12月14日
  • 数据库选型之内存数据库eXtremeDB

    数据库选型之内存数据库eXtremeDB鉴于内存数据库访问速率快的特点,本文分别从单线程、多线程(并发访问)和多线程读/写混合访问角度对eXtremeDB数据库读写速率展开测试。需要指出的是,本文读取操作包含将数据读取后,并在控制台显示出来

    2022年7月2日
  • Linux 配置Maven环境

    Linux 配置Maven环境Linux配置Maven环境

    2022年5月14日
  • 子查询关键字-ALL、ANY、SOME、IN、EXISTS「建议收藏」

    子查询关键字-ALL、ANY、SOME、IN、EXISTS「建议收藏」子查询关键字-ALL、ANY、SOME、IN、EXISTSALLselectfromwherec>all(查询语句)等价于selectfromwherec>result1andc>result2andc>result3特点: 1:all与子查询返回的所有值比较为true则返回true 2:ALL可以与=><>=<=<>结合使用 3:all表示指定列中的值必须要大于子查询集中的每一个值

    2022年7月27日
  • 二维数组初始化规则

    二维数组初始化规则二维数组初始化的形式为:  数据类型数组名[整常量表达式][整常量表达式]={初始化数据};  在{}中给出各数组元素的初值,各初值之间用逗号分开。把{}中的初值依次赋给各数组元素。  有如下几种初始化方式:  ⑴分行进行初始化  inta[2][3]={{1,2,3},{4,5,6}};  在{}内部再用{}把各行分开,第一对{}中的初值1,2,3是0行的3个元素的初值。第…

    2022年7月18日
  • mysql远程连接及用户相关命令

    一、创建用户并授权登录root:root@localhost:~#mysql-uroot-p创建username(用户)使用password(密码)从任何主机连接到mysql服务器:mysql&gt;GRANTALLPRIVILEGESON*.*TO’username’@’%’IDENTIFIEDBY’password’WITHGRANTO…

    2022年4月6日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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