页面评论功能，当评论较多时，有时须要滚动到评论头部。

能够使用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

JavaScript 滚动页面到指定元素位置的更多相关文章

  1. selenium（6）-截取完整页面和指定元素并保存为图片

    截图操作 截取整个页面 截取指定元素 只有这2个方法 比较简单,见下图代码 from selenium import webdriver driver = webdriver.Chrome(" ...

  2. jquery操作滚动条滚动到指定元素位置 scrollTop

    $('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...

  3. Vue系列：滚动页面到指定位置实现

    方法1:scrollTop 滚动到某位置 方法2:scrollTo,scrollBy,scroll滚动到某位置 方法3:scrollIntoView() 实现滚动到具体某元素 需注意,上述3种方法都不 ...

  4. 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)

    对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.Phant ...

  5. 在浏览器中使用jquery取得iframe中页面中指定元素的值的不同

    自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(wind ...

  6. Python + Selenium 实现对页面的指定元素截图(可截长图元素)【转载】

    先在首页上执行一段 JavaScript 脚本,将页面的滚动条拖到最下方,然后再拖回顶部,最后才截图.这样可以解决那种按需加载图片的情况 以下代码为转载别处博客改造后的,有chrome和ff两种浏览器 ...

  7. 自动网页截图并指定元素位置裁剪图片并保存到excel表格

    # coding=utf-8 import os import time from selenium import webdriver from selenium.webdriver.chrome.o ...

  8. javascript 生成页面轮播元素

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  9. xamarin.forms 绑定页面里指定元素的某个属性值

    {Binding Source={x:Reference elementName}, Path=BindingContext.propertyname, Mode=OneWay} elementNam ...

随机推荐

  1. border和outline区别

    border和outline区别: border支持box-sizing: border-box,当有边距时,是新增了边框后在按照以前的边距处理 outline不支持box-sizing: borde ...

  2. asp.net web编程开发将model键值对化

    关键字:model属性,反射 正文         model是数据库的映射,在.net web开发中,作为程序的最底层.web开发的一切都是基于数据库的,分了层之后,就基于model了. 为什么要将 ...

  3. 发布到IIS后 程序乱码

    网站-功能视图-.net全球化 编码设置 请求:utf-8 文件:gb2312 响应:utf-8 响应头:utf-8 可以根据需要自己定义

  4. excel运行最多行数

    2003及以前版本为65536(即6万多)行,256列2007版:1048576(即1百零多万)行,16384(即1千多)列

  5. xml bug

    在Eclipse 创建动态WEB 工程,在src 下 创建 config.xml: 1 <?xml version="1.0" encoding="UTF-8&qu ...

  6. CSS XHTML规范化命名参考

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  7. JS判断请求来自Android手机还是iPhone手机，根据不同的手机跳转到不同的链接。

    <script type="text/javascript">var browser = {versions: function () {var u = navigat ...

  8. 1234: ZJTZYRC筛offer（并查集 ）

    链接:http://xcacm.hfut.edu.cn/problem.php?id=1234 以后关于字符的输入都用cin吧,换成scanf居然wa了 #include <iostream&g ...

  9. DOMElement之Offset

    有明确目的的学习比较有效,我学习HTML offset相关概念是出自一个需求,那就是计算一个绝对定位的HTML元素相对于当前窗口的偏移距离,主要是Y方向的偏移,X方向同理. 要实现这个目的,首先要弄清 ...

  10. Spark学习笔记--概念知识

    RDD被视为由不同的数据块组成,对于RDD的存取是以数据块为单位的,本质上分区(partition)和数据块(block)是等价的,只是看待的角度不同. 数据块 Spark存储管理模块中所管理的几种主 ...