Plusieurs pages Web courantes renvoient aux codes supérieurs-tutoriel HTML-php.cn

Plusieurs pages Web courantes renvoient aux codes supérieurs

韦小宝

Libérer： 2017-11-23 10:02:32

original

13285 Les gens l'ont consulté

Il est très courant sur les sites Web de cliquer pour revenir à la tête et de cliquer pour revenir au haut Aujourd'hui, nous parlerons de ces clics particulièrement simples pour revenir à Code pour l'en-tête .

1. Il est plus simple d'utiliser des balises d'ancrage HTML

Mais le seul inconvénient est que le style n'est pas très bon, et cette ancre l’étiquette sera affichée.

<aname="top"id="top"></a>

Copier après la connexion

Vous pouvez le placer n'importe où après la balise , à condition qu'il soit proche du haut.

Placer en bas de page :

<ahref="#top"target="_self">返回顶部</a>

Copier après la connexion

2. Utiliser JavascriptFonction de défilement pour revenir en haut

La fonction de défilement permet de contrôler la position de la barre de défilement. Il existe deux méthodes de mise en œuvre très simples :

Méthode 1 (recommandée : simple et pratique) :

<ahref="javascript:scroll(0,0)">返回顶部</a>

Copier après la connexion

Le premier paramètre de scroll est la position horizontale, et le deuxième paramètre est la position verticale. Par exemple, si vous souhaitez le positionner à 50 pixels verticalement, changez-le simplement pour scroll(. 0,50).

Méthode 2 (focus sur l'effet : lentement vers le haut) :

Cette méthode est un retour progressif vers le haut, qui semble meilleur. Le code est le suivant :

functionpageScroll(){window.scrollBy(0,-10);scrolldelay=setTimeout(&#39;pageScroll()&#39;,100);}<ahref="pageScroll();">返回顶部</a>

Copier après la connexion

Cela reviendra dynamiquement en haut, mais bien qu'il revienne en haut, le code est toujours en cours d'exécution et vous devez ajouter une phrase à la fonction pageScroll pour l'arrêter.

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

Copier après la connexion

3. Utilisez la fonction de défilement Onload plus pour revenir dynamiquement en haut

1. balise de la page web Ajouter avant :

<divid="gotop">返回顶部</div>

Copier après la connexion

2. Appelez ensuite la partie de script JS suivante :

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?&#39;block&#39;:"none"}};BackTop(&#39;gotop&#39;);

Copier après la connexion

Celles-ci peuvent être placées dans la page Web, ou Enregistrez-la indépendamment sous forme de fichier js, tel que gotop.js, puis appelez-la sous la forme suivante :

<scriptsrc="/js/gotop.js"type=text/javascript></script>

Copier après la connexion

Bien sûr, il est préférable de le placer sous le ". return to top". Cette méthode d'appel suppose que le fichier Le chemin est JS, veuillez le modifier en fonction de la situation réelle s'il est placé à d'autres emplacements.

Ci-dessus sont plusieurs pages Web couramment utilisées

Retournez au code supérieur, vous pouvez le modifier vous-même puis l'utiliser. Pour en savoir plus, recherchez sur le Site Web PHP chinois~

Recommandations associées :

JavaScript simple retour au début du code et commentaires

CSS-Retour en haut code_html/css_WEB-ITnose

Retour en haut Code pour les effets de masquage et de glissement intelligents implémentés avec jQuery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!