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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • spdlog用法

    spdlog用法转自:https://blog.csdn.net/haojie_superstar/article/details/89383433?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-19.control&dist_request_id=1328730.643.16167433128441371&depth_1-utm_source=distribute.pc_relevant.none-task-bl

    2022年6月23日
    25
  • Laravel Exceptions——异常与错误处理「建议收藏」

    Laravel Exceptions——异常与错误处理

    2022年2月14日
    45
  • 提升苹果电脑速度的10个小技巧[通俗易懂]

    提升苹果电脑速度的10个小技巧[通俗易懂]众所周知,随着时间的流逝,包括Mac在内的所有计算机的速度都会降低。除了换电脑,还是有许多简单的调整可以提高计算机的性能并加快运行速度较慢的Mac,而且这些调整不会花费一分钱。1.升级macOS许多人仍然相信操作系统升级的神话总是会降低计算机的速度。尽管有时它们在旧Mac可能会出现性能问题,但这些更新通常弊大于利。它们包括错误修复,修补程序和改进,这些改进通常会提高Mac的速度。这些操作系统更新文件可能很大。因此,如果硬盘驱动器空间不足,则可能需要先释放硬盘空间。2.释放硬盘空间当您的存储驱动器达到其

    2022年5月26日
    53
  • 分子模拟软件amber_Gromacs联用GAFF力场处理水溶剂下小分子动力学

    分子模拟软件amber_Gromacs联用GAFF力场处理水溶剂下小分子动力学与GROMACS偏重生物大分子模拟的力场不同,AMBER支持很多方便处理有机小分子的力场(详见http://sobereva.com/115),如GAFF力场,简单而又有不错的精度,适合处理有机小分子;这里将介绍用Gaussian计算RESP电荷,交由Amber生成GAFF力场下的拓扑文件,最后用GROMACS模拟的过程。软件版本:AmberTools18,Gromacs2019-beta-1…

    2022年5月25日
    100
  • Idea激活码最新教程2019.1.4版本,永久有效激活码,亲测可用,记得收藏

    Idea激活码最新教程2019.1.4版本,永久有效激活码,亲测可用,记得收藏Idea 激活码教程永久有效 2019 1 4 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2019 1 4 成功激活

    2025年5月24日
    2
  • java四舍五入取整算法(小数四舍五入取整公式)

    简介Math类中提供了5个与取整相关的函数,如下所示:staticdoubleceil(doublea):天花板函数,返回大于等于a的最小整数(但是以浮点数形式存储)。staticdoublefloor(doublea):地板函数,返回小于等于a的最大整数(但是以浮点数形式存储)。staticdoublerint(doublea):四舍五入函数,返

    2022年4月16日
    378

发表回复

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

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