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

能够使用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. Android SDK Manager 无法更新SDK

    Android SDK Manager 被墙后无法更新SDK 下载sdk时抛出错误:Failed to fetch URL http://dl-ssl.google.com/ 參考例如以下博客: ht ...

  2. Java 动态代理机制详解（JDK 和CGLIB，Javassist，ASM）

    class文件简介及加载 Java编译器编译好Java文件之后,产生.class 文件在磁盘中.这种class文件是二进制文件,内容是只有JVM虚拟机能够识别的机器码.JVM虚拟机读取字节码文件,取出 ...

  3. linux 下文件的比较

    1.cmp命令,比较两个文件是否相同 比较文件test1和test2,如果这两个文件完全相同,则无任何输出,否则,输出第一处不同所在的字节以及行号,然后忽略后面的不同之处,退出命令的执行. [root ...

  4. 前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

    数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 ...

  5. ASP.net 前台页面通过ID获取控件

    asp.net的服务器控件的ID通常只能在服务器端很好的识别,客户端需要通过ClientID获得控件 1.通过js获得   var controlID = "<%=controlID. ...

  6. ASP.NET MVC Controller接收ajax post方式发送过来的json对象或数组数据

    本例旨在说明我的一种Controller接收ajax提交(POST)过来的json对象或数组信息的方式,感觉应该有更好的方式,欢迎提出宝贵意见. JSON.stringify(jsonObj)不支持I ...

  7. 10个最实用的Linux命令

    收集了一些对于Linux新手最基本但最有用的Linux命令.你完全可以键入这些命令来管理你的服务器.这些命令对于学习vps或服务器管理的新手最为简便.1.List命令 ls -a //列出所有文件 l ...

  8. access 2007 vba 开发中学到的知识（一）

    使用ado连接本身的数据库,需要先创建一个 adodb.connection的连接对象 Set cn = CreateObject("ADODB.Connection") 数据库的 ...

  9. C#字节byte类型读取与写入

    //创建文件 //File.Create(@"D:\a.txt"); //Console.WriteLine("创建成功"); ////删除文件 //File. ...

  10. PHP+MySQL Smarty简单分页显示示例

    一.分页程序的原理 分页程序有两个非常重要的参数:每页显示几条记录($pagesize)和当前是第几页($page). 有了这两个参数就可以很方便的写出分页程序,我们以MySql数据库作为数据源,在m ...