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

能够使用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. Java基础知识强化51:经典排序之桶排序(BucketSort)

    1. 首先说明三点: (1)桶排序是稳定的 (2)桶排序是常见排序里最快的一种,比快排还要快…大多数情况下 (3)桶排序非常快,但是同时也非常耗空间,基本上是最耗空间的一种排序算法 2. 桶排序的分析 ...

  2. 显示目录树命令tree

    -a:显示所有文件,包括隐藏文件 -d:只显示目录 -f:显示完整的文件名,包含路径 -L:显示目录树的深度 [root@rusky /]# tree -L -a -f /home /home |-- ...

  3. <a>标签中href="javascript:;"

    javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等. 1 <a id="jsPswEdit" class="set ...

  4. js精度丢失解决办法

    /** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失. * * @param num1加数1 | num2加数2 */ function numAdd(num1, num2) { var ...

  5. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  6. C#高级知识点概要(3) - 特性、自动属性、对象集合初始化器、扩展方法、Lambda表达式和Linq查询

    1.特性(Attributes) 特性(Attributes),MSDN的定义是:公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法 ...

  7. Jquery简略API使用

    都是个人随手笔记,既然开通了博客园就分享给大家.谨做为参考,具体大家自己测试以及使用 ★ $() ★ JQ的一个万能获取对象的函数(获取跟CSS获取元素是一样的)$(function(){}); 替代 ...

  8. .net转php laraval框架学习系列(四) 项目实战---View

    laravel的参考文档中view的讲解有些简单. 在实际项目开发中view的灵活性其实是非常大. 首先来看看laravel中的布局页 和asp.net mvc中有什么不同 <!DOCTYPE ...

  9. Python新手学习基础之数据类型——数字类型

    创建一组数字 Python 的有以下几种内置数字类型: int,整型,比如:1.-2.598: float,浮点型,比如:0.0.-3.5.18.55: bool,布尔型,即True和False两个关 ...

  10. EXC_BREAKPOINT (code=EXC_I386_BPT, subcode=0x0)

    EXC_BREAKPOINT (code=EXC_I386_BPT, subcode=0x0) 原因:重复的release了某个对象