[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 ...
随机推荐
- pandas数据导出Execl
脚本主要功能是将数据库查询到的结果,通过pandas写到到execl文件中. #!/usr/bin/env python #-*- coding: utf8 -*- from sqlalchemy i ...
- 130道ASP.NET面试题(一)
1 .简述 private,protected,public,internal修饰符的访问权限 答: private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内部 ...
- java多线程回顾2:生命周期与控制
1. 线程生命周期概述 线程的生命周期如下图: 2. 新建与就绪 当程序使用new关键字创建一个线程之后,线程就处于新建状态了.此时线程只是被分配了内存资源,初始化了成员变量. 当线程对象被调用了 ...
- java多线程与线程并发五:多个线程访问共享对象和数据的方式
本节的内容主要是对前面几节提到的线程间共享数据的方式做一个总结. 线程之间共享数据有以下几种方式: 1.如果每个线程执行的代码相同,可以使用同一个Runnable对象. 2.如果每个线程执行的代码不同 ...
- 深入理解计算机系统 第八章 异常控制流 Part1 第二遍
第二遍读这本书,每周花两到三小时时间,能读多少读多少(这次看了第 500~507 页,共 8 页) 第一遍对应笔记链接 https://www.cnblogs.com/stone94/p/101651 ...
- T-SQL, Part III: Check table's existance
There are several approaches to achieve so. Just list out all approaches I have tried: Approach 1: s ...
- C++中对C的扩展学习新增语法——强枚举
枚举类型 C++中对枚举的加强: 1.C++不允许非枚举值赋值给枚举类型,不允许其他枚举类型的值赋值给当前枚举类型,而C语言中是允许的. 2.枚举值具有外层作用域,容易造成名字冲突. 3.不同类型的枚 ...
- java编程思想第四版第六章总结
1. 代码重构 为什么f要代码重构 第一次代码不一定是完美的, 总会发现更优雅的写法. 代码重构需要考虑的问题 类库的修改不会破坏客户端程序员的代码. 源程序方便扩展和优化 2. 包 创建一个独一无二 ...
- django 中 css文件的调用
Django: 配置css文件 晚上搞了好久的css文件的调用,发现,我根本文件位置都放错了. 接下来要更改settings.py 和 urls.py 的设定. Settings.py 中应该: ur ...
- LeetCode 5272. 5272. 统计参与通信的服务器 Count Servers that Communicate
地址 https://leetcode-cn.com/problems/count-servers-that-communicate/ 题目描述这里有一幅服务器分布图,服务器的位置标识在 m * n ...