[TimLinux] JavaScript 代码控制滚动条移动到顶部/底部
1. scrollIntoView函数
这个函数控制滚动条顶部内容、还是底部内容呈现在视图窗口中,接收一个参数:boolean值。
true: 顶部出现在视图窗口中
false: 底部存在在视图窗口中
2. 示例
<div>
<pre>...</pre>
</div>
如果内容长度在pre中,且是pre中的内容很长导致出现滚动条,则调用该函数应该是由pre元素,示例:
var idPre = document.getElementById('idPre');
idPre.scrollIntoView(false); // 滚动到底部
idPre.scrollIntoView(true); // 滚动到顶部,默认值
[TimLinux] JavaScript 代码控制滚动条移动到顶部/底部的更多相关文章
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- C#中用鼠标移动页面功能的实现(代码控制滚动条)
项目中需要实现以下功能: 打印预览控件中,可以用鼠标拖动页面,以查看超出显示范围之外的部分内容. 该功能本来可以通过拉动水平和垂直滚动条来实现,但实际使用中,用户更趋向于直接用鼠标拖动页面来实现,很多 ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- Selenium 2自动化测试实战21【调用JavaScript(控制浏览器的滚动条)】
一.调用JavaScript(控制浏览器的滚动条) WebDriver提供了execute_script()方法来执行JavaScript代码.用于调整浏览器滚动条位置的JavaScript代码如下 ...
- python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- [TimLinux] JavaScript position为fixed时支持水平滚动条
1. 固定定位 position: fixed;设置好之后,元素在浏览器窗口中的位置就固定住了,这个时候,不论是水平移动滚动条,还是垂直移动滚动条,元素是打死都不会动的. 但是当用fixed定位的元素 ...
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- selenium执行JavaScript语句:控制滚动条 聚焦元素 改变下拉选项
1. 执行js脚本 控制滚动条 # http://www.cnblogs.com/yoyoketang/p/6128655.html In [347]: js = "window.scrol ...
随机推荐
- Flink入门(一)——Apache Flink介绍
Apache Flink是什么? 在当代数据量激增的时代,各种业务场景都有大量的业务数据产生,对于这些不断产生的数据应该如何进行有效的处理,成为当下大多数公司所面临的问题.随着雅虎对hadoop的 ...
- thinkphp5中取消了3.2版本中的单字母函数,初用tp5可能不大适应,下边给出两者的对应参照表,以便查阅。
3.2版本 5.0版本 C config E exception G debug L lang T 废除 I input N 废除 D model M db A controller R action ...
- thinkphp 5.1 去掉 .html 后缀
thinkphp 5.1 去掉 .html 后缀
- 在C\C++中char 、short 、int各占多少个字节
在C\C++中char .short .int各占多少个字节 : #include <bits/stdc++.h> using namespace std; int main() { co ...
- Laravel 菜鸟的晋级之路
第一阶段:简单的增删改查 这是最开始接触Laravel的一个阶段.如果有PHP经验,那么应该能很快找到MVC的路径,然后驾轻就熟的开始写起来.虽然还显得有些笨拙,不过很快就能做出一些内容了.如果没有P ...
- 听说PHP的生成器yield处理大量数据杠杠的
官方解释yield yield生成器是php5.5之后出现的,官方文档这样解释:yield提供了一种更容易的方法来实现简单的迭代对象,相比较定义类实现 Iterator 接口的方式,性能开销和复杂性大 ...
- 程序员用于机器学习数据科学的3个顶级 Python 库
NumPy NumPy(数值 Python 的简称)是其中一个顶级数据科学库,它拥有许多有用的资源,从而帮助数据科学家把 Python 变成一个强大的科学分析和建模工具.NumPy 是在 BSD 许可 ...
- C语言基础——进制转换 / 数据表示
第一部分:进制转换 二进制:由0~1构成,逢2进1 八进制:由0~7构成,逢8进1 十六进制:由0~9.A~F构成,逢16进1 两个基本概念 基数:n进制基数为n 123.4 = 1*10^2 + 2 ...
- 2019 ICPC Asia Nanjing Regional K. Triangle
题目:在直角坐标系中给定 p1,p2,p3构成三角形,给定p4可能在三角形边上也可能不在, 问能不能在三角形上找出p5,使得线段p4p5,平分三角形(p4必须在三角形上).不能则输出-1. 思路:四个 ...
- 设计模式之工厂模式(Factory)
转载请标明出处:http://blog.csdn.net/shensky711/article/details/53348412 本文出自: [HansChen的博客] 设计模式系列文章: 设计模式之 ...