2 qq 24992289 qq_24992289 于 2016.04.18 15:16 提问

求一段js返回顶部的代码

当页面有滚动条并且滚动条不位于顶部时,出现返回顶部的图片或者按钮,返回顶部后自动消失,求大神指点

8个回答

showbo
showbo   Ds   Rxr 2016.04.18 16:10
已采纳
 <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>
CSDNXIAOD
CSDNXIAOD   2016.04.18 15:23

js 返回顶部代码
js 返回顶部代码
用js做的返回顶部
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

zr_ming_007
zr_ming_007   2016.04.18 15:22

$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>50){
$(".backtop").show();
}else{
$(".backtop").hide();

}
});
$(".backtop").click(function(){
$('body,html').animate({scrollTop:0},300);
});
})

qq_24992289
qq_24992289 如何使用纯js代码来写呢,不使用jQuery
一年多之前 回复
zr_ming_007
zr_ming_007   2016.04.18 15:24

qq_19891827
qq_19891827   2016.04.18 15:28

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;
});

qq_19891827
qq_19891827   2016.04.18 15:28

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;
});
qq_19891827
qq_19891827 那你使用上面无聊码农的代码就可以了
一年多之前 回复
qq_24992289
qq_24992289 如何使用纯js代码来写呢,不使用jQuery
一年多之前 回复
qq_24288349
qq_24288349   2016.04.18 17:21

u010850027
u010850027   2016.04.18 19:46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


无标题页

网页内容
网页内容
//加入在线客服开始 document.writeln("<div id=\"divKF\" style=\"position:fixed;z-index:5000;_position:absolute; top:0px;left:0px;\">回到顶部</div>"); var divKF = document.getElementById("divKF"); //更新回到顶部位置 function KFLocation() { divKF.style.left = document.documentElement.clientWidth - divKF.offsetWidth + "px"; if(isIE6) { divKF.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight - divKF.offsetHeight + "px"; } else { divKF.style.top = document.documentElement.clientHeight - divKF.offsetHeight + "px"; } } function isAgent(s) { if(navigator.userAgent.indexOf(s) == -1) return false; else return true; } var isIE6 = false; if(isAgent("MSIE 6.0")) { isIE6 = true; } window.setInterval("KFLocation()",100);



Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!