1、返回顶部的过程是一个由快到慢的滚动过程;
2、在返回顶部的滚动过程中，如果滚动鼠标滚轮，可暂停在当前位置。
3、滚动条距离顶部较远时,显示返回顶部按钮,较近时不显示;

主要知识点

1、DOM操作

document.getElementById
-根据ID获取标签元素 var obtn=document.getElementById('btn') ;

获取浏览器距离顶部的高度，注意在chrom和IE等浏览器的兼容性
- document.documentElement.scrollTop 滚动条到顶端的距离，可以读写（适用 IE 类浏览器）
- document.body.scrollTop 滚动条到顶端的距离，可以读写（适用 chrome 类浏览器）

2、事件运用

window.onload 页面加载完毕后触发
onclick 点击后触发
window.onscroll 滚动条滚动时触发

3、定时器

setInterval() 设置定时器，需传入两个参数：第一个是重复执行的函数，第二个是函数重复执行的时间间隔
clearInterval() 关闭定时器，需传入一个参数：定时器对象

代码
首先获取元素标签，并对其绑定点击事件：获取滚动条距离顶部的高度并进行赋值操作。这样可实现每点击一次滚动条向上滚动200的距离，需要不断触发点击事件直到滚动条回到顶部为止。

var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
//osTop=200;
document.documentElement.scrollTop=document.body.scrollTop-=200;
使用setInterval()函数，每隔一段时间执行一次赋值操作。并当滚动条距离顶部的高度值osTop为0时，清除定时器。
 
为了实现滚动条向上滚动的过程是一个由快到慢的过程，执行下面的运算。ispeed的绝对值越大、滚动条距离顶部的高度值就越小，即回到顶部的速度就越快；ispeed的绝对值越小，返回顶部的速度就相对较小。
 在这里使用Math.floor()向下取整，当osTop / 5介于0~1之间时，ispeed的值舍为0。这样的话chrome浏览器中滚动条距离顶部的高度值 document.body.scrollTop= osTop-0，这样滚动条的距离顶部的高度会一直为某个数字。导致滚动条到顶部的距离永远不会为0，这样滚动条看似在顶部位置停止，实际上鼠标下拉滚动条时发现滚动条依然会向上滚动，说明定时器一直在执行。
 
var ispeed=Math.floor(osTop / 5);
document.documentElement.scrollTop=document.body.scrollTop = osTop-ispeed;
// console.log(osTop-ispeed);
但是，用Math.ceil()向上取整，可保证ispeed的值不会为0；或者依然使用Math.floor()将值改为负值Math.floor(-osTop / 5)是一样的道理。代码如下：
 
var timer = null;
obtn.onclick=function(){
        //设置定时器
        timer=setInterval(function(){
            //获取滚动条距离顶部的高度
            var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
            var ispeed=Math.floor(-osTop / 5);
            isTop = true;
            document.documentElement.scrollTop=document.body.scrollTop = osTop+ispeed;
            if(osTop==0){
                clearInterval(timer);
        },30);
这样就实现了点击返回顶部按钮，页面返回顶部的速度随着滚动条到顶部距离的减小而变慢，即实现了一个速度由快到慢的过程。
 
window是一个窗口类，onscroll是窗口类window的对象,滚动滚动条时触发。
 这里window.onscroll事件的目的，就是在使用鼠标的滚动按钮滚动页面时停止setInterval.用的方法是添加一个isTop.由于页面是一点一点滚动的，函数会被执行多次。鼠标滚动，触发window.onscroll,执行完里面的函数后才执行setInterval，但是在执行window.onscroll事件第二次的时候!isTop=true,清楚定时器，这个时候就不再往上滚动了。
 
    var isTop = true;
    var clientHeight = document.documentElement.clientHeight;//获取页面可视区高度
    window.onscroll=function(){
        //alert(clientHeight);
        //滚动条滚动触发
        if(!isTop)//条件为真时执行清除定时器操作
            clearInterval(timer);
        isTop = false;
实现了滚动暂停，另外再在window.onscroll事件中使用脚本控制“回到顶部”按钮的显示与隐藏
 
    var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
    if(osTop >= clientHeight){
            obtn.style.display = 'block';
        }else{
            obtn.style.display = 'none';
var osTop = document.documentElement.scrollTop为什么不能做全局变量
 1、尽量不要使用全局变量。每声明一个全局变量会占用一点内存，另外会造成变量名污染；
 2、var osTop = document.documentElement.scrollTop。如果写在外面，osTop只是在JS文件载入时获取滚动条距离顶部的高度，但有的时候，如页面在滚动的时候osTop的值是在不断变化的，所以我们要在绑定scroll事件中不断的去获取osTop的值.
                    锚链接使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能.功能点1、返回顶部的过程是一个由快到慢的滚动过程;2、在返回顶部的滚动过程中，如果滚动鼠标滚轮，可暂停在当前位置。3、滚动条距离顶部较远时,显示返回顶部按钮,较近时不显示;主要知识点1、DOM操作docum...
				
scrollTo有两种语法：
1.scrollTo(x,y)   //指定滚动到x轴和y轴的位置
2.scrollTo(options)  //options有三个参数，（left,top,behavior ）,
top 等同于  y-coord
left 等同于  x-coord
behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),...
				
如何让子元素滚动到指定父窗口的指定位置什么是滚动距离读取滚动距离如何设置滚动scrollTop属性scrollTo方法
什么是滚动距离
比如父元素设置了overflow: hidden;, 当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离.
读取滚动距离
    <title>test</title>
    <style>
            width: 200px;
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo.js"></script> 
2、HTML
使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:<a href="#" ></a>,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能.功能点 
1. 返回顶部的过程是一个由快到慢的滚动过程; 
2. 在返回顶部的滚动过程中，如果滚动鼠标滚轮，可暂停在当前位置。 
3. 滚动条距离顶部较远时,显示返回顶部按钮,较近时不显
xpos   Type: Integer 要在窗口文档显示区左上角显示的文档的 x 坐标
ypos   Type: Integer 要在窗口文档显示区左上角显示的文档的 y 坐标
duration Type: Integer 滚动时间周期，单位是毫秒
示例：在 hello mui 下拉刷新示例中，实现了双击标题栏，让列表快速回滚到顶部的功能；代码如下：
var contentWebview = n
				
当RecyclerView中的数据集很大时，通过smoothScrollToPosition去滚动到一个位置，如果这个位置和当前位置相差很远，比如说300项，你会发现整个过程很长，比如说我遇到的，滚动300项，用了3.5秒。
这主要跟RecyclerView smoothScroll的方式有关，它内部有一个常量值代表每滚动1px需要多少时间，所以滚动的距离越远，需要的时间越长。所以当真的
				
element.scrollTo首先需要注意的是调用scrollTo方法的是出现滚动的父元素，即高度固定overflo:scroll的那个元素。
1.滚动到的位置确定：
const parent = document.querySelector(`.parent`)
//scrollTo可以直接传入滚动的X,Y值，也可以传入一个对象
//直接传值
parent.scrollTo(0,100)
//传入对象的方式，这种方式可以控制滚动的速度
parent.scrollTo({
  top: 100 ,
RecyclerView 滑动 到指定的Item 有两个 常用的方法 ScrollToPosition（int position）smoothScrollToPosition(int position)
     * Starts a smooth scroll to an adapter position.
     * &amp;lt;p&amp;gt;
     * To support sm...
 要在scrollView滑动时候做一些操作，那么我们就需要监听scrollView的滑动事件，但是原生控件没有将 onScrollChanged（）对外开放，所以我们需要自定义一个ScrollView话不多说上枯燥的代码
public class HoldTab...
去掉 overflow-y: auto;
如果你需要把这个页面当做子组件引入 需要加true 因为 ····  请看最后一张图片   如果不加true 不变成捕获事件 则无法成功引用
<template>
	<div class="totop">
		<div class="btnTop" v-if="btnFlag" @click="backTop()">
				
最近做一个项目前端要用到scrollTo和滚动视觉差。顺便把两个东西拿出来温习一下。
HTML DOM里面定义了scrollTo方法，用法：scrollTo(xpos,ypos)，把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能说是滚动，似乎没有滑动的效果显示出来。好在JQuery提供了足够多方便的插件，其中一个就能够提供平滑滚动的功能，是平滑哦~
插件叫做jquery.scrol...
  // 当用户点击按钮时，页面滚动到顶部
  $('#back-to-top').click(function() {
    $('html, body').animate({scrollTop: 0}, 800);
    return false;
这样就可以实现一个简单的回到顶部功能了。