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 代码控制滚动条移动到顶部/底部的更多相关文章

  1. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  2. C#中用鼠标移动页面功能的实现(代码控制滚动条)

    项目中需要实现以下功能: 打印预览控件中,可以用鼠标拖动页面,以查看超出显示范围之外的部分内容. 该功能本来可以通过拉动水平和垂直滚动条来实现,但实际使用中,用户更趋向于直接用鼠标拖动页面来实现,很多 ...

  3. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  4. Selenium 2自动化测试实战21【调用JavaScript(控制浏览器的滚动条)】

     一.调用JavaScript(控制浏览器的滚动条) WebDriver提供了execute_script()方法来执行JavaScript代码.用于调整浏览器滚动条位置的JavaScript代码如下 ...

  5. python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  6. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  7. [TimLinux] JavaScript position为fixed时支持水平滚动条

    1. 固定定位 position: fixed;设置好之后,元素在浏览器窗口中的位置就固定住了,这个时候,不论是水平移动滚动条,还是垂直移动滚动条,元素是打死都不会动的. 但是当用fixed定位的元素 ...

  8. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  9. selenium执行JavaScript语句:控制滚动条 聚焦元素 改变下拉选项

    1. 执行js脚本 控制滚动条 # http://www.cnblogs.com/yoyoketang/p/6128655.html In [347]: js = "window.scrol ...

随机推荐

  1. nginx目录安全设置

    nginx目录安全设置<pre> location ~ /\. { deny all; }</pre>这样所有隐藏文件都不会以URL方式打开了

  2. 006.Kubernetes二进制部署ETCD

    一 部署ETCD集群 1.1 安装ETCD etcd 是基于 Raft 的分布式 key-value 存储系统,由 CoreOS 开发,常用于服务发现.共享配置以及并发控制(如 leader 选举.分 ...

  3. MySQL使用查看表SELECT语句

    来源:实验楼 本节实验中学习了 SELECT 语句的常用方法: 基本语法 数学符号条件 AND OR IN 通配符 排序 SQL 内置函数和计算 子查询与连接查询 输入命令,下载代码: git clo ...

  4. Redis实战--Jedis实现分布式锁

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 分布式 ...

  5. 资深架构师Sum的故事:(Mysql)InnoDB下,存储过程中事务的处理

    | 故事背景 话说有一回,X市X公司的产品经理Douni兴致冲冲的跑来和Sum(Sum,X市X公司资历8年程序猿,技能:深思.熟虑.心细.深究.技术过敏.口头禅:嗯,容我想想.坚信:只要赚钱的业务,我 ...

  6. VMware Workstation Pro(15.5)下安装Windows_Server_2008_R2

    一.新建虚拟机 1.打开VMware Workstation Pro 15.5虚拟机,点击新建虚拟机 2.选择典型(推荐),单击下一步 3.选最后一个 稍后安装操作系统,点击下一步 4.进来页面,选择 ...

  7. 【NServiceBus】什么是Saga,Saga能做什么

    前言           Saga单词翻译过来是指尤指古代挪威或冰岛讲述冒险经历和英雄业绩的长篇故事,对,这里强调长篇故事.许多系统都存在长时间运行的业务流程,NServiceBus使用基于事件驱动的 ...

  8. Java程序性能优化之性能概述

    性能的基本概念 一).什么叫程序的性能? 程序运行所需的内存和时间. 二).性能的表现形式: 1).执行速度: 程序的反应是否迅速,响应时间是否足够短. 2).启动时间:程序从运行到可以处理正常业务所 ...

  9. VueRouter爬坑第二篇-动态路由

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  10. 【2018寒假集训 Day2】【2019.5.11更新】【动态规划】花店橱窗布置(FLOWER)

    花店橱窗布置(FLOWER) 提交文件名:flower 问题描述: 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号, ...