前台页面HTML
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> img { position: fixed; bottom: 100px; right: 50px; cursor: pointer; display: none; border: 1px solid #000; } div { width: 1210px; margin: 100px auto; text-align: center; font: 500 26px/35px "simsun"; color: red; } </style> <script src="animate.js"></script> <script> window.onload = function () { //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。 //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。 // 技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标 //步骤： //1.老三步 var img = document.getElementsByTagName("img")[0]; window.onscroll = function () { //被卷去的距离大于200显示小火箭，否则隐藏 //2.显示隐藏小火箭 if(scroll().top>1000){ img.style.display = "block"; }else{ img.style.display = "none"; } //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离 leader = scroll().top; } //3.缓动跳转到页面最顶端（利用我们的缓动动画） var timer = null; var target = 0; //目标位置 var leader = 0; //显示区域自身的位置 img.onclick = function () { //技术点：window.scrollTo(0,0); //要用定时器，先清定时器 clearInterval(timer); timer = setInterval(function () { //获取步长 var step = (target-leader)/10; //二次处理步长 step = step>0?Math.ceil(step):Math.floor(step); leader = leader +step; //显示区域移动 window.scrollTo(0,leader); //清除定时器 if(leader === 0){ clearInterval(timer); } },25); } } </script> </head> <body> <img src="images/Top.jpg"/> <div> 我是最顶端.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> </div> </body> </html>
调用封装好的JS文件
//缓动动画封装
function animate(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var step = (target-ele.offsetTop)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.top = ele.offsetTop + step + "px";
console.log(1);
if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
ele.style.top = target + "px";
clearInterval(ele.timer);
}
},25);
}
/**
* Created by andy on 2015/12/8.
*/
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
/**
* Created by Lenovo on 2016/9/2.
*/
/**
* 通过传递不同的参数获取不同的元素
* @param str
* @returns {*}
*/
function $(str){
var str1 = str.charAt(0);
if(str1==="#"){
return document.getElementById(str.slice(1));
}else if(str1 === "."){
return document.getElementsByClassName(str.slice(1));
}else{
return document.getElementsByTagName(str);
}
}
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给定元素查找他的最后一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getLastNode(ele){
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getNextNode(ele){
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个兄弟元素节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getPrevNode(ele){
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
* @param ele 元素节点
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找他的所有兄弟元素，并返回数组
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定义一个新数组，装所有的兄弟元素，将来返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判断，如果不是传递过来的元素本身，那么添加到新数组中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}