[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 ...
随机推荐
- java中 equals和==区别
一.java当中的数据类型和“==”的含义: 基本数据类型(也称原始数据类型) :byte,short,char,int,long,float,double,boolean.他们之间的比较,应用双等号 ...
- Angular前端优化思路
简单总结接下我这边angular前端优化步骤都是满满的干货,各位客官有好的改进欢迎留言~ 1. 动静分离 项目里面前端比较占用带宽的一般都是加载静态资源,请求后台接口一般占用带宽都是1kb左右,但是在 ...
- Zabbix-(六) JMX监控
Zabbix-(六) JMX监控 一.前言 Zabbix提供了JMX监控,它通过JMX API获取JVM信息,从而提供监控数据.本文讲述使用JMX监控Tomcat的JVM信息. 准备 Zabbix S ...
- 如何使用Sping Data JPA更新局部字段
问题描述 在更新数据时,有时候我们只需要更新一部分字段,其他字段保持不变.Spring Data JPA并未提供现成的接口,直接使用save()更新会导致其他字段被Null覆盖掉. 解决办法 通常有两 ...
- vux组件的全局注册引入
安装好vux后,要引入全局组件是要在main.js中使用Vue.component引入的,不能直接使用Vue.use,不能直接使用Vue.use,不能直接使用Vue.use import router ...
- Nginx 跨域代理
安装环境: win10 nginx-1.17.2 安装: 在写前端调用后台接口时,报了跨域的错误. 调试地址:http://localhost:5500/demo/encAjax.html 接口地址: ...
- Android的系统框架
Android的系统架构采用了分层架构的思想,如图1所示.从上层到底层共包括四层,分别是应用程序程序层.应用框架层.系统库和Android运行时和Linux内核. 图1:Android系统架构图 每 ...
- 百度杯 十二月 what_the_fuck
对于这道题,我还真的想说 what_the_fuck !! 这道题拿到就只发觉一个格式化字符串漏洞,其他的就找不到了 . unsigned __int64 sub_4008C5() { char s; ...
- 视频转GIF+GIF录制
GIF录制 Windows--oCam oCam使用非常简便,它还可以用来录音,录制视频,并且是单文件版,很小,使用也非常方便,如果用来录制GIF,大家导出录制的视频选择GIF格式就可以了: Wind ...
- JS的引用顺序真的灰常重要
JS的引用一定要记得顺序,不然常常会被小小的问题卡住很久.