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

能够使用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. MySQL数据库的双向加密方式

    如果你正在运行使用MySQL的Web应用程序,那么你把密码或者其他敏感信息保存在应用程序里的机会就很大.保护这些数据免受或者窥探者的获取 是一个令人关注的重要问题,因为您既不能让未经授权的人员使用或者 ...

  2. tail-head

    [root@rusky]# tail test3 #不加参数默认显示全部内容 line line2 line3 line4 line5 line6 line7 line8 line9 line10 [ ...

  3. HTML基础总结<文本格式>

    HTML 文本格式化标签 标签 描述 <b> 定义粗体文本 <em> 呈现为被强调的文本 <i> 定义斜体字 <small> 定义小号字 <str ...

  4. SQL2008安装重启失败

    我今天安装SQL2008的一些问题经历SQL2008安装重启失败大致出错信息如下:RebootRequiredCheck 检查是否需要挂起计算机重新启动.挂起重新启动会导致安装程序失败. 失败 需要重 ...

  5. DataBase First创建数据库

    Entity Framework:ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,并提供了三种模式,分 ...

  6. java下DataInputStream与DataOutputStream写入数据的同时写入数据类型

    package cn.stat.p2.demo; import java.io.DataInputStream; import java.io.DataOutputStream; import jav ...

  7. Ubuntu中安装编译并测试HTK语音识别库

    1.在网上看到首先必须确保电脑上安装了g++和libx11 g++ --version //检测g++版本 sudo apt-get install libx11-dev:i386 2.然后可从HTK ...

  8. windows下配置lamp环境(0)---软件获取

    工作快一年了,还没有怎么配置过服务器环境,经常使用集成套件wampserver,为了复习配置wamp服务器 特意在虚拟机中测试安装步骤如下. 安装前步骤:下载软件.软件下载地址如下: 1.apache ...

  9. PHP学习系列（1）——字符串处理函数（1）

    从09年开始使用JAVA到现在差不多5年多了,然后由于即将要去的公司(研究僧终于要毕业了!)是使用PHP,Python作为后台开发语言的,所以要开始一段双P的学习旅程.用过PHP的都说这是很简单的一门 ...

  10. Membership添加验证码登录

    1.在公共类ImageHelper中编写公共方法,产生随机验证码 /// <summary> /// 产生随机验证码 /// </summary> /// <return ...