jQuery implementiert die Return-to-Top-Funktion, die für Browser geeignet ist, die js_jquery nicht unterstützen-js-Tutorial-php.cn

jQuery implementiert die Return-to-Top-Funktion, die für Browser geeignet ist, die js_jquery nicht unterstützen

WBOY

Freigeben： 2016-05-16 16:39:22

Original

1226 Leute haben es durchsucht

Viele Websites verfügen über einen Return-to-Top-Effekt. In diesem Artikel wird erläutert, wie Sie mit jquery einen Return-to-Top-Button implementieren.

Zuerst müssen Sie oben das folgende HTML-Element hinzufügen:

<p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p>

Nach dem Login kopieren

Das a-Tag zeigt auf den Ankerpunkt oben, wodurch ein Ankerpunkt von erreicht werden, wenn der Browser js nicht unterstützt.

Wenn Sie möchten, dass das nach oben zurückgekehrte Bild rechts angezeigt wird, benötigen Sie auch einige CSS-Stile wie folgt:

/*returnTop*/ 
p#back-to-top{ 
position:fixed; 
display:none; 
bottom:100px; 
right:80px; 
} 
p#back-to-top a{ 
text-align:center; 
text-decoration:none; 
color:#d1d1d1; 
display:block; 
width:64px; 
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ 
-moz-transition:color 1s; 
-webkit-transition:color 1s; 
-o-transition:color 1s; 
} 
p#back-to-top a:hover{ 
color:#979797; 
} 
p#back-to-top a span{ 
background:transparent url(/static/imgs/sprite.png&#63;1202) no-repeat -25px -290px; 
border-radius:6px; 
display:block; 
height:64px; 
width:56px; 
margin-bottom:5px; 
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ 
-moz-transition:background 1s; 
-webkit-transition:background 1s; 
-o-transition:background 1s; 
} 
#back-to-top a:hover span{ 
background:transparent url(/static/imgs/sprite.png&#63;1202) no-repeat -25px -290px; 
}

Nach dem Login kopieren

Das Hintergrundbild im obigen Stil ist ein Sprite-Bild, das unten für Freunde zur Verfügung gestellt wird:

Bei HTML und Stilen müssen wir auch js verwenden, um die Schaltfläche „Zurück zum Anfang“ zu steuern, die beim Scrollen der Seite ein- und ausgeblendet wird.

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
<script> 
$(function(){ 
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 
$(function () { 
$(window).scroll(function(){ 
if ($(window).scrollTop()>100){ 
$("#back-to-top").fadeIn(1500); 
} 
else 
{ 
$("#back-to-top").fadeOut(1500); 
} 
}); 

//当点击跳转链接后，回到页面顶部位置 

$("#back-to-top").click(function(){ 
$('body,html').animate({scrollTop:0},1000); 
return false; 
}); 
}); 
}); 
</script>

Nach dem Login kopieren

Das ist es.

Beachten Sie, dass Sie nach dem Laden der Seite die Bildlaufleiste ein wenig nach unten ziehen müssen, um die Darstellung wieder nach oben zu sehen.