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

能够使用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. 十二.200多万元得到的创业教训--app名字是关键

    摘要:当完毕了一个app后,就要须要上应用市场,以下讲一下起名和上应用市场的一些技巧. 健生干货分享:第12篇 1.必须是先上app store,再上其它应用市场 为啥要这样做?由于app store ...

  2. java中的变量

    变量就是命名的内存空间 1.声明和赋值方式:数据类型   变量名 = 值: 数据类型即划分的内存空间,变量名即划分出的内存空间的名 2.变量必须先声明才能使用,不能使用一个没有经过预先声明的变量:没有 ...

  3. (转)js学习笔记()函数

    1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...

  4. linux 使用ptrace函数时找不到头文件 .h 或者找不到某个宏的解决方法

    例如: #include <stdio.h> #include <sys/ptrace.h> #include <sys/types.h> #include < ...

  5. MongoDB 介绍及Windows下安装

    一.MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mongo使用C++ ...

  6. js+css:43种常见的浏览器兼容性问题大汇总

    javascript 1.HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname或者document.getE ...

  7. Spring MVC异常处理

    Spring Mvc 中异常处理,一般有两种解决办法: 一.利用org.springframework.web.servlet.handler.SimpleMappingExceptionResolv ...

  8. ECSTORE导航吸顶功能

    ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...

  9. Java并发编程--同步容器

    BlockingQueue 阻塞队列 对于阻塞队列,如果BlockingQueue是空的,从BlockingQueue取东西的操作将会被阻断进入等待状态,直到BlockingQueue进了东西才会被唤 ...

  10. Feedly订阅Blog部落格RSS网摘 - Blog透视镜

    网络信息爆炸的时代,如何更有效率地阅读文章,订阅RSS网摘,可以快速地浏览文章标题,当对某些文章有兴趣时,才点下连结连到原网站,阅读更详细的文章,Feedly Reader阅读器除了提供在线版订阅RS ...