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)


相关推荐

  • SCL语法_c语言语法表达式定义

    SCL语法_c语言语法表达式定义SCL:StructuredControlLanguage,结构化控制语言。SCL是一种类似于计算机高级语言的编程方式,只是这种语言编写的程序,可以在PLC中运行。如果学过C语言或者VB语言,就会很容易上手SCL。当然没有基础依然可以从零开始学习。在PLC中有了SCL这种编程语言,就可以方便的把计算机高级语言,编写的算法移植到PLC中。西门子以下系列的PLC都支持SCL语言编程:S7-300S…

  • 关于tcp连接中timewait的作用

    关于tcp连接中timewait的作用今天简单的谈一下tcp连接中timewait的作用,如果没有timewait会发生什么呢?我们知道首先请求关闭连接的一方会存在timewait状态。首先我们来看一下tcp四次挥手的过程示意图:客户端首先发起FIN请求,所以客户端会进入time_wait状态。如果没有time_wait或者用户自己通过调整tcp_tw_recycle缩短了time_wait的时间会出现生什问题呢?

  • SpringBoot 配置 Redis 连接池

    SpringBoot 配置 Redis 连接池SpringBoot2.0默认采用Lettuce客户端来连接Redis服务默认是不使用连接池的,只有配置redis.lettuce.pool下的属性的时候才可以使用到redis连接池

    2022年10月31日
  • phpstorm有红波浪线,怎么找到语法错误的地方

    phpstorm有红波浪线,怎么找到语法错误的地方

  • 架构之业务架构[通俗易懂]

    架构之业务架构[通俗易懂]业务架构之产品经理的职责产品经理的职责用户的原始需求往往是零散和碎片化的,产品经理的职责就是:告诉用户,系统长什么样子;告诉开发,他要实现什么功能。产品经理定义了系统的外表。产品经理的职责:1、收集用户的原始需求,2、梳理成一个个业务流程,每个业务流程由多个业务步骤组成。一个业务步骤包含三部分的内容:输入、输出和业务功能。3、需求梳理好后,产品经理会把每个步骤具体化为页面原型。在原型中,会以直观的方式给出各个步骤的输入或输出,以及用户的操作过程,最后再把这些页面串起来,形成一个业

    2022年10月12日
  • DMRS与SRS

    DMRS与SRSSRS作用:SRS分类:SRS配置:如果SRS在某个子帧上发送,则SRS将占据该子帧的最后一个SC-FDMA符号上(DMRS在每个子帧的符号3和10),若最后一个SC-FDMA符号分配给SRS,

发表回复

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

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