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


相关推荐

  • matlab中的colorbar用法(显示色阶的颜色栏)

    matlab中的colorbar用法(显示色阶的颜色栏)原文matlab画平面分布图时colorbar的设置是非常重要的,好的colorbar不仅使图像更美观,而且能够使人更容易捕捉图上传递的信息。用过matlab的同学都知道matlab默认的colormap是jet,也就是你画完图后输入“colorbar”它所显示出来的颜色。此外,matlab还自带了很多colormap,如hsv,autumn,bone,colorcube等等。我们直接…

    2022年5月31日
    355
  • mpvue还能用吗(mpvue的性能问题)

    在newvue()的时候不能加入store,否则在App.vue文件中onLaunch(){}失效正确的使用姿势:importstorefrom’@/store’Vue.prototype.$store=store

    2022年4月14日
    58
  • ms17010复现

    ms17010复现关于漏洞的复现干多了就发现,这种菜鸟级别的复现,,真是没有啥实用性,主要就是,自己玩玩,,,唉,,  ms17_010,好像跟什么永恒之蓝,勒索病毒有啥关系。但是,我这种小白可管不着,而且现在做的所有的复现都是基于防火墙关闭,所以,没有啥技术,复现也白复现。。。。 好了,还是讲复现: 搜索:search17_010很容易看出来,这个第一个方法是搜索网段中主机漏洞的,

    2022年6月6日
    56
  • labview霍夫曼编码_香农编码与霍夫曼编码[通俗易懂]

    labview霍夫曼编码_香农编码与霍夫曼编码[通俗易懂]一.香农-范诺编码香农-范诺(Shannon-Fano)编码的目的是产生具有最小冗余的码词(codeword)。其基本思想是产生编码长度可变的码词。码词长度可变指的是,被编码的一些消息的符号可以用比较短的码词来表示。估计码词长度的准则是符号出现的概率。符号出现的概率越大,其码词的长度越短。香农-范诺编码算法需要用到下面两个基本概念:(1)熵(Entropy)某个事件的信息量(又称自信息)用Ii…

    2025年9月3日
    6
  • Oracle数据库ORA-12154: TNS: 无法解析指定的连接标识符解决方法[通俗易懂]

    Oracle数据库ORA-12154: TNS: 无法解析指定的连接标识符解决方法[通俗易懂]对于这个问题,对于我这种初学者来说是经常遇到的,今天就把可靠的解决发法记于此,希望能帮助到大家。ORA-12154:TNS:无法解析指定的连接标识符第一步:查看自己的Oracle服务是否打开。OracleDBConsoleORCL是Oracle网页端管理工具的服务,访问地址一般为“http://127.0.0.1:1158/em/console/logon/logon”,如果不习惯用…

    2022年7月19日
    16
  • 国外免费高速php空间,0fees – 300M国外高速免费PHP空间

    国外免费高速php空间,0fees – 300M国外高速免费PHP空间0fees是美国的免费空间,速度不错,提供300M空间,每月10G流量限制,ftp、web方式上传管理文件,支持PHP5,提供3个MySQL数据库,无限个支持POP3的电子邮箱,可以添加6个二级域名,绑定6个域名,可建6个不同网站,cPanel管理面板。网址:http://www.0fees.net点“OrderNow!”申请。申请很简单,填写用户名、密码、电子邮箱、网站类型、网站语言、验证码,…

    2022年9月21日
    2

发表回复

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

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