[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 ...
随机推荐
- CSS3解决字母不换行的方法
CSS3解决字母不换行的方法 <pre>word-wrap: break-word;</pre>
- vue的相关知识
一.DOM vs 函数库 vs框架 DOM: API繁琐 函数库:JQuery对DOM的每个步骤的API进行一对一的简化,但并没有改变DOM做事的步骤和方法. 框架:一个包含部分已经实现的功能的半成 ...
- mpvue+小程序云开发,纯前端实现婚礼邀请函(相册小程序)
请勿使用本文章及源码作为商业用途! 前言 当初做这个小程序是为了婚礼前的需要,结婚之后,希望这个小程序能够留存下来,特地花了一些空闲时间将小程序转化成为“相册类小程序” 体验码 准备工作 mpvue框 ...
- WIN7安装Docker Toolbox、制作镜像并发到阿里云
一.安装Docker Toolbox,并配置国内源加速 WIndows7不支持Hyper-v,所以只能采用Docker Toolbox的方式使用Docker.传送门:http://mirrors.al ...
- Anaconda 笔记
Anaconda笔记 conda 功能 管理版本的切换 安装其他的包 conda 创建python27环境 conda create --name python27 python=2.7 conda ...
- 06_K-近邻算法
k-近邻算法 算法介绍 定义: 如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一类别,则该样本也属于这个类别. 计算距离公式:欧式距离 (两点之间距离) 需要做标准化 ...
- 领扣(LeetCode)合并两个有序数组 个人题解
给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m 和 n. ...
- python:timeit模块
(鱼c)timeit模块详解——准确测量小段代码的执行时间 http://bbs.fishc.com/forum.php?mod=viewthread&tid=55593&extra= ...
- lldb调试使用python脚本问题总结
lldb调试器可以使用python脚本实现功能增强,但也不是可以随心所欲的,在实际中有很多地方需要注意. 首先是对多线程环境调试使用python脚本,也要考虑python脚本有多线程安全,尤其是有许多 ...
- LeetCode 5272. 5272. 统计参与通信的服务器 Count Servers that Communicate
地址 https://leetcode-cn.com/problems/count-servers-that-communicate/ 题目描述这里有一幅服务器分布图,服务器的位置标识在 m * n ...