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


相关推荐

  • Python报错:pandas.errors.ParserError: Error tokenizing data. C error: Expected 3……

    Python报错:pandas.errors.ParserError: Error tokenizing data. C error: Expected 3……报错信息用Python做数据处理时,报如下错误:pandas.errors.ParserError:Errortokenizingdata.Cerror:Expected3fieldsinline28,saw4错误原因首先我们先看一下报错:pandas.errors.ParserError:Errortokenizingdata.Ce…

    2022年6月30日
    95
  • Java设计模式之观察者模式

    本文继续介绍23种设计模式系列。介绍的是观察者模式。

    2022年3月11日
    43
  • 一些非常有价值的资料网站有哪些_比较有价值的网站

    一些非常有价值的资料网站有哪些_比较有价值的网站最近在搜集资料的时候,发现了很多好的资料网站,不忍独享,陆续整理出来,贴这里。我先有一个贴一个,等到攒到足够多的时候,我再重新进行整理:电影类:IMDb:http://www.imdb.com/(美国著名互联网电影资料库(InternetMovieDatabase,简称IMDb)是一个关于电影演员、电影、电视节目、电视明星、电子游戏和电影制作的在线数据库。亚马逊公司旗下网站)烂番茄…

    2025年9月1日
    9
  • P3P解决cookie跨域

    P3P解决cookie跨域P3P是什么P3P(PlatformforPrivacyPreferences)是W3C公布的一项隐私保护推荐标准,以为用户提供隐私保护。 P3P标准的构想是:Web站点的隐私策略应该告之访问者该站点所收集的信息类型、信息将提供给哪些人、信息将被保留多少时间及其使用信息的方式,如站点应做诸如“本网站将监测您所访问的页面以提高站点的使用率”或“本网站将尽可能为您提供更合适的广告”等

    2025年6月2日
    2
  • android详解_MPAndroidChart

    android详解_MPAndroidChart在开发当中曲线图用的时候太多了,之前都是自己手写,之后发现太累还丑不符合需求MPAndroidChart先介绍LineChart0.效果图首先依赖1. implementation

    2022年8月6日
    5
  • XmlDocument操作XML「建议收藏」

    XmlDocument操作XML「建议收藏」https://www.cnblogs.com/fengxuehuanlin/p/5631664.htmlC#XmlDocument操作XMLXML:ExtensibleMarkupLanguage(可扩展标记语言)的缩写,是用来定义其它语言的一种元语言,其前身是SGML(StandardGeneralizedMarkupLanguage,标准通用标记语言)。它没有标签集(t…

    2022年6月22日
    48

发表回复

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

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