html5 回到顶部按钮,“返回顶部”按钮效果

“返回顶部”按钮效果

pc端：

返回顶部

.wrapper {

width: 1150px;

height: 3582px;

border: 2px solid black;

}

.back_top {

width: 37px;

height: 42px;

position: fixed;

right: 50%;

margin-right: -540px;

bottom: 66px;

overflow: hidden;

}

.up-to-top {

display: block;

width: 39px;

height: 42px;

background: url('./img/top.png') no-repeat;

background-position: -20px -257px;

opacity: 0.5;

}

.up-to-top:hover {

opacity: 1;

}

window.onload = function() {

var obtn = document.getElementById('btn');

var timer = null;

var isTop = true;

//获取页面的可视窗口高度

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

//滚动条滚动时触发

window.onscroll = function() {

//在滚动的时候增加判断

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

if (osTop >= clientHeight) {

obtn.style.display = 'block';

} else {

obtn.style.display = 'none';

}

if (!isTop) {

clearInterval(timer);

}

isTop = false;

};

btn.onclick = function() {

//设置定时器

timer = setInterval(function() {

//获取滚动条距离顶部的高度

var osTop = document.documentElement.scrollTop || document.body.scrollTop; //同时兼容了ie和Chrome浏览器

//减小的速度

var isSpeed = Math.floor(-osTop / 6);

document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;

//console.log( osTop + isSpeed);

isTop = true;

//判断，然后清除定时器

if (osTop == 0) {

clearInterval(timer);

}

}, 30);

};

}

M移动端：

$('.backToTop').on('touchend', function () {

var T = $(window).scrollTop();

var t = setInterval(function () {

if (T < 0) {

clearInterval(t);

} else {

T -= 50;

$(window).scrollTop(T);

}

}, 13);

});