JavaScript 滚动页面到指定元素位置
页面评论功能,当评论较多时,有时须要滚动到评论头部。
能够使用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>
JavaScript 滚动页面到指定元素位置的更多相关文章
- selenium(6)-截取完整页面和指定元素并保存为图片
截图操作 截取整个页面 截取指定元素 只有这2个方法 比较简单,见下图代码 from selenium import webdriver driver = webdriver.Chrome(" ...
- jquery操作滚动条滚动到指定元素位置 scrollTop
$('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...
- Vue系列:滚动页面到指定位置实现
方法1:scrollTop 滚动到某位置 方法2:scrollTo,scrollBy,scroll滚动到某位置 方法3:scrollIntoView() 实现滚动到具体某元素 需注意,上述3种方法都不 ...
- 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)
对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.Phant ...
- 在浏览器中使用jquery取得iframe中页面中指定元素的值的不同
自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(wind ...
- Python + Selenium 实现对页面的指定元素截图(可截长图元素)【转载】
先在首页上执行一段 JavaScript 脚本,将页面的滚动条拖到最下方,然后再拖回顶部,最后才截图.这样可以解决那种按需加载图片的情况 以下代码为转载别处博客改造后的,有chrome和ff两种浏览器 ...
- 自动网页截图并指定元素位置裁剪图片并保存到excel表格
# coding=utf-8 import os import time from selenium import webdriver from selenium.webdriver.chrome.o ...
- javascript 生成页面轮播元素
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- xamarin.forms 绑定页面里指定元素的某个属性值
{Binding Source={x:Reference elementName}, Path=BindingContext.propertyname, Mode=OneWay} elementNam ...
随机推荐
- sqlserver 2008 sa登陆的一些问题
sqlserver 2008 sa登陆 无法连接到(local)? 遇到这个问题请确保SQL主服务是开启状态: ok接下来把服务器名换成 计算机名\实例名 再次使用sa登陆,如下: 是不是可以了呢? ...
- mybati之parameterType传递多个参数
当在查询的时候需要传入多个参数的时候该怎么办呢: 1,封装成一个Model对象,底层HashMap还是一个 User user=new User(); user.setUserName("z ...
- 颜色矩阵 滤镜 ColorMatrix
颜色矩阵原理 色彩的三要素 1.色相.色相通俗的说就是"颜色",色相的改变就是颜色的改变,色相的调节伴随着红橙黄绿蓝紫的变化. 2.亮度.明度通俗的说就是"光照度&quo ...
- 当setTimeout遇到闭包
1: function myTest(){ for(var i=0; i< 5; i++){ setTimeout(console.log(i), 0); } } myTest(); 或者比较正 ...
- 深入理解PreparedStatement和Statement
执行SQL语句时,就执行一次使用Statement对象,当一句SQL语句要执行多次,这时使用PrepareStatement.虽然使用PrepareStatement执行一次时非内存,但是,在后来的执 ...
- JavaWeb三大组件(Servlet,Filter,Listener 自己整理,初学者可以借鉴一下)
JavaWeb三大组件(Servlet,Filter,Listener 自己整理,初学者可以借鉴一下) Reference
- SQL存储过程笔记
一.概述 存储过程(Stored Procedure)是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它. 优点: ...
- tomcat 远程 调试 eclipse
windows系统: 修改catalina.bat 端口9000 SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compiler=NONE ...
- C/C++中的浮点数运算
代码: #include <iostream> #include <cstdio> #include <cfloat> using namespace std; i ...
- [Leetcode][001] Two Sum (Java)
题目在这里: https://leetcode.com/problems/two-sum/ [标签]Array; Hash Table [个人分析] 这个题目,我感觉也可以算是空间换时间的例子.如果是 ...