正文
css回到顶部样式,css回到页面顶部
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
用纯CSS制作返回顶部的滑动效果
要有那个滑上去过度,不用JS你别想了,不用JS只能一点链接一下就跳到页头去。
css3中怎么做返回顶部
重点是go-top的CSS定义:
div.go-top { display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;}div.go-top:hover { opacity: 1;
filter: alpha(opacity=100);}div.go-top div.arrow { position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;}div.go-top div.stick { position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;}
使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。
按钮默认不可见,当滚动页面到一定高度后,按钮出现,这里用jQuery实现
$(function() { $(window).scroll(function() { if ($(window).scrollTop() 1000) $('div.go-top').show(); else
$('div.go-top').hide();
}); $('div.go-top').click(function() { $('html, body').animate({scrollTop: 0}, 1000);
});
});
当按下按钮时,有动画效果返回顶部
html css JS 怎么设计点击回顶部效果?
点击回顶部,或是回某个位置,主要是设置scrollTop。
下面是一个简单回顶的例子:
下面的例子是缓慢回顶。如果将快速回顶,可以直接让scrollTop = 0;就可以了。
style
body{height:5000px;}
input {position:fixed; bottom:0px; right:0px;}
/style
script
window.onload=function(){
var oBtn = document.getElementById('btn');
var timer = null;
var bFlag = false;
oBtn.onclick=function(){
moveScroll(0,3000);
};
window.onscroll=function(){
if(bFlag)
{
clearInterval(timer);
}
bFlag=true;
};
function moveScroll(target,time)
{
var start = document.documentElement.scrollTop || document.body.scrollTop;
var dis = target - start;
var count = Math.floor(time/30);
var n=0;
clearInterval(timer);
timer = setInterval(function(){
n++;
bFlag=false;
document.documentElement.scrollTop = start + dis*n/count;
document.body.scrollTop = start+dis*n/count;
if(n==count)
{
clearInterval(timer);
}
},30);
}
};
/script