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)
上一篇 2022年1月31日 上午11:00
下一篇 2022年1月31日 下午12:00


相关推荐

  • 1.2.HTML的核心标签

    1.2.HTML的核心标签

    2022年2月24日
    38
  • 关于箭头函数中的this的指向

    关于箭头函数中的this的指向普通函数中的 this 1 this 总是代表它的直接调用者 js 的 this 是执行上下文 例如 obj func 那么 func 中的 this 就是 obj2 在默认情况 非严格模式下 未使用 usestrict 没找到直接调用者 则 this 指的是 window 约定俗成 3 在严格模式下 没有直接调用者的函数中的 this 是 undefined4 使用 call apply bind ES5 新

    2026年3月19日
    4
  • 曼彻斯特编码,差分曼彻斯特编码和NRZI编码

    曼彻斯特编码,差分曼彻斯特编码和NRZI编码曼彻斯特编码曼彻斯特编码 ManchesterEn 也叫做相位编码 PhaseEncode 简写 PE 是一个同步时钟编码技术 被物理层使用来编码一个同步位流的时钟和数据 在曼彻斯特编码中 用电压的跳变的不同来区分 1 和 0 从低电压到高电压的跳变表示 0 从高电压到低电压的跳变表示 1 如图 也就是说 若我们已知一个数字信号 就可以通过信号中的每一个时钟信号下电

    2026年3月19日
    3
  • FlashFXP v3.5.4注册码+FlashFXP v3.6.0注册码+FlashFXP v3.7.2.build.1266注册码[通俗易懂]

    FlashFXP v3.5.4注册码+FlashFXP v3.6.0注册码+FlashFXP v3.7.2.build.1266注册码[通俗易懂]FlashFXP是功能强大的FXP/FTP软件,融合了一些其他优秀FTP软件的优点,如像CuteFTP一样可以比较文件夹,支持彩色文字显示;像BpFTP支持多文件夹选择文件,能够缓存文件夹;像LeapFTP一样的外观界面,甚至设计思路也差相仿佛。支持文件夹(带子文件夹)的文件传送、删除;支持上传、下载及第三方文件续传;可以跳过指定的文件类型,只传送需要的文件;可以自定义不同

    2022年7月26日
    9
  • redis分布式锁的应用场景有哪些_redis setnx 分布式锁

    redis分布式锁的应用场景有哪些_redis setnx 分布式锁“分布式锁”是用来解决分布式应用中“并发冲突”的一种常用手段,实现方式一般有基于zookeeper及基于redis二种。具体到业务场景中,我们要考虑二种情况:一、抢不到锁的请求,允许丢弃(即:忽略)比如:一些不是很重要的场景,比如“监控数据持续上报”,某一篇文章的“已读/未读”标识位更新,对于同一个id,如果并发的请求同时到达,只要有一个请求处理成功,就算成功。用活动图表示如下:二、并发请求,不论哪一条都必须要处理的场景(即:不允许丢数据)比如:一个订单,客户正在前台修改地址,管理员在后台同时修

    2025年10月8日
    5
  • OpenClaw大龙虾出生记:全网最完整保姆级安装指南

    OpenClaw大龙虾出生记:全网最完整保姆级安装指南

    2026年3月13日
    5

发表回复

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

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