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


相关推荐

  • 【测试】黑盒测试用例设计方法

    【测试】黑盒测试用例设计方法黑盒测试用例设计方法包括:1、等价类划分法、2、边界值分析法、3、错误推测法、4、因果图法、5、判定表驱动法、6、正交试验设计法、7、功能图法、8、场景法等。9、状态迁移法10、流程分析法11、逐级细分法12、输入域分析法13、输出域分析法14、异常分析等价类划分法概念等价类划分法是把程序的输入域划分成若干部分…

    2022年4月27日
    29
  • 微信小程序中-[渲染层网络层错误] pages/card/card.wxss 中的本地资源图片无法通过 WXSS 获取-解决办法

    微信小程序中-[渲染层网络层错误] pages/card/card.wxss 中的本地资源图片无法通过 WXSS 获取-解决办法1、报错原由微信小程序使用background-image运行时报错pages/index/index.wxss中的本地资源图片无法通过WXSS获取,可以使用网络图片,或者base64,或者使用标签。小程序样式中不允许小程序路径2、解决方法1.使用图片的网络路径background:url(‘http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg’);2.base64将图

    2022年6月24日
    39
  • navicat for MySQL版本15激活码_最新在线免费激活2022.02.02

    (navicat for MySQL版本15激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月31日
    285
  • LDAP协议介绍[通俗易懂]

    LDAP协议介绍[通俗易懂]LDAP协议基础概念 1.从用途上阐述LDAP,它是一个存储静态相关信息的服务,适合“一次记录多次读取”。常用LDAP服务存储的信息: 公司的物理设备信息(如打印机,它的IP地址、存放位置、厂商、购买时间等)公开的员工信息(地址、电话、电子邮件…)合同和账号信息(客户信息、产品交付日期、投标信息、项目信息…)凭证信息(认证凭证、许可证凭证…)2

    2022年10月31日
    0
  • SQLiteOpenHelper 操作不成功

    SQLiteOpenHelper 操作不成功

    2022年2月5日
    27
  • Linux搭建SVN服务器详细教程

    Linux搭建SVN服务器详细教程前言本文讲解Linux系统下如何搭建SVN服务器,详细说明各配置项的功能,最终实现可管控多个项目的复杂配置SVN是subversion的缩写,是一个开放源代码的版本控制系统,通过采用分支管理系统的

    2022年7月1日
    30

发表回复

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

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