当页面有滚动条并且滚动条不位于顶部时,出现返回顶部的图片或者按钮,返回顶部后自动消失,求大神指点
<style>#toTop{position:fixed;right:0;bottom:20px;display:none}</style>
<div style="height:2000px"></div>
<a href="#" id="toTop">top↑</a>
<script>
function winScroll() {
var st = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
document.getElementById('toTop').style.display=st>=100?'block':'none'
}
var timer
window.onscroll = function () {
clearTimeout(timer);
timer = setTimeout(winScroll, 10);
}
</script>
$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>50){
$(".backtop").show();
}else{
$(".backtop").hide();
}
});
$(".backtop").click(function(){
$('body,html').animate({scrollTop:0},300);
});
})
html代码及css代码就不说了,自己写应该难不倒你,js代码如下:
$(window).scroll(function(){
if($(window).scrolltop()!=0){
$("a[href='#top']").fadeIn(200);
}else{
$("a[href='#top']").fadeOut(200);
}
});
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
html代码及css代码就不说了,自己写应该难不倒你,js代码如下:
$(window).scroll(function(){
if($(window).scrolltop()!=0){
$("a[href='#top']").fadeIn(200);
}else{
$("a[href='#top']").fadeOut(200);
}
});
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">