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

能够使用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. Ubuntu 14.04 下手动安装Firefox的Flash插件

    有时候我们不得不採用手动安装一些软件. Ubuntu 14.04 下手动安装Firefox的Flash插件有下面几步 1. 下载Flash插件 下载地址为http://get.adobe.com/cn ...

  2. .NET基础拾遗（7）多线程开发基础4

    一.多线程编程中的线程同步 1.C#中的lock关键字 lock关键字可能是我们在遇到线程同步的需求时最常用的方式,但lock只是一个语法糖,为什么这么说呢,下面慢慢道来. (1)lock的等效代码其 ...

  3. （二）《Java编程思想》——t h i s 关键字

    this 关键字(注意只能在方法内部使用)可为已调用了其方法的那个对象生成相应的句柄.可象对待其他任何对象句柄一样对待这个句柄. package chapter4; //: Leaf.java // ...

  4. IE标签a嵌套table标签，链接点击无效

    在IE中,使用如下代码将无法触发跳转: <a href="http://xx.xx.com"> <table> <tr> <td>点 ...

  5. （五）JS学习笔记 - JQuery缓存机制

    历史背景 开发中常常因为方便,把状态标志都写到dom节点中,也就是HTMLElement,缺点: 循环引用 直接暴露数据,安全性? 增加一堆的自定义属性标签,对浏览器来说是没意义的 取数据的时候要对H ...

  6. Oracle—用户管理的备份（一）

    用户管理的备份(一) 一．首先要知道数据库中表空间和文件的信息,有几个性能视图,v$datafile,v$tablespace,v$tempfile,v$logfile,v$controlfile,d ...

  7. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  8. JSP中页面定时刷新

    1.JSP中页面定时刷新 <% //页面每隔30秒自动刷新一遍 response.setHeader("refresh" , "30" ); %> ...

  9. Linux下的管道命令有这些：

    Linux下的管道命令有这些: 选取命令:cat grep 排序命令:sort wc uniq 双向重定向:tee 字符转换命令: tr, col, join, paste, expand 切割命令: ...

  10. cf D. Dima and Hares

    http://codeforces.com/contest/358/problem/D 题意:ai代表相邻的两个野兔都没有吃食物情况下的快乐系数,bi代表的是在相邻的两个野兔中有一个吃到食物的快乐系数 ...