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 ...
随机推荐
- Java基础知识强化51:经典排序之桶排序(BucketSort)
1. 首先说明三点: (1)桶排序是稳定的 (2)桶排序是常见排序里最快的一种,比快排还要快…大多数情况下 (3)桶排序非常快,但是同时也非常耗空间,基本上是最耗空间的一种排序算法 2. 桶排序的分析 ...
- 显示目录树命令tree
-a:显示所有文件,包括隐藏文件 -d:只显示目录 -f:显示完整的文件名,包含路径 -L:显示目录树的深度 [root@rusky /]# tree -L -a -f /home /home |-- ...
- <a>标签中href="javascript:;"
javascript: 是一个伪协议,其他的伪协议还有 mail: tel: file: 等等. 1 <a id="jsPswEdit" class="set ...
- js精度丢失解决办法
/** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失. * * @param num1加数1 | num2加数2 */ function numAdd(num1, num2) { var ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- C#高级知识点概要(3) - 特性、自动属性、对象集合初始化器、扩展方法、Lambda表达式和Linq查询
1.特性(Attributes) 特性(Attributes),MSDN的定义是:公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法 ...
- Jquery简略API使用
都是个人随手笔记,既然开通了博客园就分享给大家.谨做为参考,具体大家自己测试以及使用 ★ $() ★ JQ的一个万能获取对象的函数(获取跟CSS获取元素是一样的)$(function(){}); 替代 ...
- .net转php laraval框架学习系列(四) 项目实战---View
laravel的参考文档中view的讲解有些简单. 在实际项目开发中view的灵活性其实是非常大. 首先来看看laravel中的布局页 和asp.net mvc中有什么不同 <!DOCTYPE ...
- Python新手学习基础之数据类型——数字类型
创建一组数字 Python 的有以下几种内置数字类型: int,整型,比如:1.-2.598: float,浮点型,比如:0.0.-3.5.18.55: bool,布尔型,即True和False两个关 ...
- EXC_BREAKPOINT (code=EXC_I386_BPT, subcode=0x0)
EXC_BREAKPOINT (code=EXC_I386_BPT, subcode=0x0) 原因:重复的release了某个对象