介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
}/*版心*/.w {
宽度:980 px;
保证金:0汽车;
}/*头部样式*/.head {
身高:200 px;
background - color:蓝绿色;
}/*内容区域样式*/.banner {
身高:450 px;
背景颜色:红色
}/*栏是侧边栏*/.sidebar {
位置:绝对的;
前:300像素;
右:250 px;
显示:inline-block;
宽度:40像素;
身高:80 px;
背景颜色:青色;
text-align:中心;
}/*侧边栏“返回顶部”字体*/.sidebar跨度{
显示:没有;
字体大小:14 px;
光标:指针;
}/*主体div样式*/.zhuti {
身高:300 px;
背景颜色:紫色;
}/*底部样式*/.footer {
身高:700 px;
背景颜色:黄色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=皊idebar"祝辞广告& lt; br> & lt; br>
& lt;跨度id=皉eturns"祝辞返回顶部& lt;/span>
& lt;/div>
& lt; div类=巴穡"祝辞头部区域& lt;/div>
& lt; div类=昂岱鵺"祝辞横幅区域& lt;/div>
& lt; div类=皕huti w"在主体区域& lt;/div>
& lt; div类=耙辰舧"祝辞尾部区域& lt;/div>
& lt; script>//Js代码部分
var栏=document.querySelector (& # 39; .sidebar& # 39;)
var=document.querySelector旗帜(& # 39;.banner& # 39;)
var bannerTop=banner.offsetTop;//获取主体区域的事件源
var zhuti=document.querySelector (& # 39; .zhuti& # 39;);
var跨度=document.querySelector(& # 39;跨度# 39;);
var zhutiTop=zhuti.offsetTop;//console.log (bannerTop)//200//横幅。offestTop就是被卷去头部的大小一定要写到滚动的外面//当我们侧边栏固定定位之后应该变化的数的值
var sidebarTop=侧边栏。offsetTop - bannerTop;
document.addEventListener(& # 39;滚动# 39;,函数(){//console.log (window.pageYOffset)
如果窗口。pageYOffset祝辞=bannerTop) {
sidebar.style。=& # 39;位置固定# 39;;
sidebar.style。顶级=sidebarTop + & # 39; px # 39;;
其他}{
sidebar.style。位置=& # 39;绝对# 39;;
sidebar.style。顶级=300 + & # 39;px # 39;;
}//当到底主题区域的时候,显示跨度的内容
如果窗口。pageYOffset祝辞=zhutiTop) {
span.style。=& # 39;显示块# 39;;
其他}{
span.style。=& # 39;显示没有# 39;;
}
}）//封装了一个动画js文件
动画(obj、目标函数、fn1) {//console.log (fn1);//fn是一个回调函数,在定时器结束的时候添加//每次开定时器之前先清除掉定时器
clearInterval (obj.timer);
obj。计时器=setInterval(函数(){//步长计算公式越来越?/步长取整
var=(目标- obj.pageYOffset)/10步;
一步=一步比;0,# 63;Math.ceil(步骤):Math.floor(步骤);
如果(obj。pageYOffset==目标){
clearInterval (obj.timer);//如果fn1存在,调用fn
如果(fn1) {
fn1 ();
}
其他}{//每30毫秒就将新的值给obj.left
窗口。滚动(0,obj。pageYOffset +步骤);
}
},30)
}//获取返回顶部的事件点击触发
var回报=document.querySelector(& # 39; #返回# 39;);
returns.addEventListener(& # 39;点击# 39;,函数(){//警报(111);//window.scroll (x, y)可以返回顶部//window.scroll (0,0);
动画(窗口,0)
}）
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要介绍了js实现带有动画的返回顶部的方法是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
1,滑动鼠标往下滑动,侧边栏跟着往上移动,当到达某一个位置的时候,侧边栏停止移动;鼠标往上,则侧边栏往下-停止
2,当鼠标继续下滑到某一个位置,“返回顶部”几个字会弹出此处如果点击“返回顶部”,则立刻到了顶部
3,到达顶部位置效果
4,源代码
