1.第一种方式：锚链接
<a href='#dd'></a>
<div id="dd"></div>
优点：简单快速，没有兼容性问题
缺点：
视觉上不够直观，用户体验不太好
2.js的方式：
DOM:
document.getElementById
2.事件运用：
window.onload页面加载完后触发
onclick点击后触发
window.onscroll---滚动条滚动时触发
3.定时器--动态的效果用定时器
setInterval()
clearInterval();
小随知识：
href="javascript:;"作用是：阻止浏览器默认行为；；；若为空，默认调到顶部
window.onscroll=function() {}//当滚动条发生滚动时触发。
IE识别document.documentElement.scrollTop
谷歌识别document.body.scrollTop
各浏览器兼容写法var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
为窗口添加滚动条滚动事件
window.onscroll=function(){}; //在滚动条发生滚动是触发
注意在获取滚动条距离的时候
谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
这样才能兼容各个浏览器！
获取滚动高度：
chrome:document.body.scrollTop
IE:document.documentElement.scrollTop
步骤：
1、点击之后让滚动条回到顶部：
（1）获取滚动条到顶部的距离var disTop = document.documentElement.scrollTop || document.body.scrollTop;
（2）设置定时器不断改写距离数值document.documentElement.scrollTop = document.body.scrollTop -= 200；
到达顶部的时候清除定时器：if(disTop == 0){ clearInterval(timer); }
（3）定义一个渐变的速度，让滚动平滑些：
var iSpeed = Math.ceil(disTop / 5);//Math.ceil()是为了确保滚动条已经彻底到顶。
document.documentElement.scrollTop = document.body.scrollTop = disTop - iSpeed;
2、滚动条距离顶部一定距离时让“回到顶部”出现：
window.onscroll = function(){
var disTop = document.documentElement.scrollTop || document.body.scrollTop;
if(disTop >= clientHeight){
oBtn.style.display = "block";
}else{
oBtn.style.display = "none";
}
}
3、中止滚动
// 获取页面可视区的高度
var clientHeight = document . documentElement . clientHeight;
// 获取滚动条高度， IE 和 其他主流浏览器
var offsetTop = document . documentElement . scrollTop || document . body . scrollTop ;
使用JavaScript实现“按钮”的显示与隐藏
1、隐藏回到顶部按钮
(1)在样式表回到顶部按钮设置成display:none;
2、获取页面可视区的高度
(1)创建变量，获取页面可视区的高度
var clientHeight=document.documentElement.clientHeight;
(2)弹出页面可视区高度
alert(clientHeight);
(3)显示回到顶部按钮，把样式表中的display先删除
(4)刷新页面获取高度后隐藏
3、增加判断，在滚动的时候
(1)获取滚动条距离顶部的高度
var disTop = document.documentElement.scrollTop || document.body.scrollTop;
(2)增加判断，让按钮显示出来
（在样式表中可以改成display:block;就能显示，但如何用js显示）
if(osTop>=clientHeight){
obtn.style.display='block';//把样式表中的display改成block
}
(3)回到第一屏隐藏
else{
obtn.style.display='none';
}
function backTop(){
var btn=document.getElementById("btn");
var timer=null;
//获取页面可视区的高度
var clientHeight=document.documentElement.clientHeight;
var isTop=true;
window.onscroll=function(){
var oTop=document.body.scrollTop||document.documentElement.scrollTop;
if(oTop>= clientHeight){
btn.style.display='block';
}else{
btn.style.display='none';
}
if(!isTop){
clearInterval(time);
}
isTop=false;
}
btn.onclick=function(){
timer=setInterval(function(
){//获取滚动条距离底部的高度
var oTop=document.body.scrollTop||document.documentElement.scrollTop;
var speed=speed>0?Math.ceil(oTop/5):Math.floor(oTop/5);
document.documentElement.scrollTop=document.body.scrollTop=oTop-speed;
isTop=true;
if(oTop===0){
clearInterval(timer);
}
},30);
}
