jQuery implémente la fonction de retour en haut adaptée aux navigateurs qui ne prennent pas en charge js_jquery

De nombreux sites Web ont un effet de retour en haut. Cet article explique comment utiliser jquery pour implémenter un bouton de retour en haut.

Vous devez d'abord ajouter l'élément html suivant en haut :

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

La balise a pointe vers le point d'ancrage supérieur, ce qui peut empêcher un point d'ancrage de être atteint lorsque le navigateur ne prend pas en charge js.

Si vous souhaitez que l'image renvoyée en haut soit affichée à droite, vous avez également besoin de quelques styles CSS, comme suit :

/*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?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; 
}

L'image d'arrière-plan dans le style ci-dessus est une image de sprite. Deux images distinctes de retour en haut sont fournies ci-dessous pour que les amis puissent les utiliser :

Avec le HTML et les styles, nous devons également utiliser js pour contrôler le bouton de retour en haut, qui apparaîtra et disparaîtra lorsque la page défile.

<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>

C'est tout.

Notez qu'après avoir chargé la page, vous devez faire glisser un peu la barre de défilement vers le bas pour voir le rendu revenir vers le haut.