「トップに戻る」ボタンはスクロールに反応して動的に表示/非表示を切り替えます

ホームページ

ウェブフロントエンド

jsチュートリアル

「トップに戻る」ボタンはスクロールに反応して動的に表示/非表示を切り替えます_javascript スキル

May 16, 2016 pm 04:34 PM

ダイナミックディスプレイトップに戻る

多くの Web サイトには、スクロールパラメータを動的に表示または非表示にするトップに戻る機能があり、初心者にとってより適しています

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;实现动态的显示回到顶部与否&lt;/title&gt;
&lt;style&gt;
/*返回顶部*/
.back_top {width:45px;height:45px;background:url(back_top_new.png) 0 0;position:fixed;left:50%;margin-left:500px;bottom:105px;display:none;}
.back_top:hover{background:url(images/back_top_new.png) 0 -46px;}
&lt;/style&gt;
&lt;/head&gt;
 
&lt;body&gt;
&lt;a title="返回顶部" href="javascript:void(0)" class="back_top"&gt;&lt;/a&gt;
&lt;script src="js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))&#63; "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
});
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
}, false);
 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;