suchen

Heim  >  Artikel  >  Web-Frontend  >  JS zurück zum oberen Beispiel-Sharing

JS zurück zum oberen Beispiel-Sharing

小云云
小云云Original
2018-01-04 10:44:321323Durchsuche

Dieser Artikel stellt hauptsächlich den JS-Return-to-Top-Beispielcode für alle im Detail vor. Interessierte Freunde können darauf verweisen.

Das Beispiel in diesem Artikel enthält den JS-Return-to-Top-Beispielcode als Referenz. Der spezifische Inhalt lautet wie folgt:

HTML/CSS-Teil


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="返回顶部效果.js"></script>
<style>
 .container{
 width:1190px;
 margin: 0px auto;
 }
 .container a{
 display: none;
 width:40px;
 height:40px;
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 position: fixed;
 left:95%;
 bottom: 50px;
 }
 .container a:hover{
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 background-position: left -40px;
 }
</style> 
</head>
<body>
 <p class="container">
 <img src="/535e0ce800015b7511902787.jpg" alt="">
 <a id="btn" href="javascript:" class="btn" title="回到顶部"></a>
 </p>
</body>
</html>

JS-Teil


window.onload=function(){
 var obtn=document.getElementById("btn");
 var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
 var isTop=true;
 var timer=null;
 window.onscroll=function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 if(topH>clientHeight){
  obtn.style.display="block";
 }else{
  obtn.style.display="none";
 }
 }
 obtn.onclick=function(){
 timer=setInterval(function(){
  var topH=document.documentElement.scrollTop||document.body.scrollTop;
  var stepLength=Math.ceil(topH/5);
  document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
  if(topH==0){
  clearInterval(timer);
  }
 },30);
 }
}

Verwandte Empfehlungen:

Mehrere gängige Webseiten kehren zum zurück Top-Code

JavaScript einfache Rückkehr zum Top-Code und Kommentarbeschreibung

Verwenden Sie JQUERY, um einen Effekt mit variabler Transparenz für die Rückkehr zum Top-Code zu erzielen

Das obige ist der detaillierte Inhalt vonJS zurück zum oberen Beispiel-Sharing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css html JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der interaktiven Implementierung einer Baidu-ähnlichen Dropdown-Liste in vue 1.xNächster Artikel：Detaillierte Erläuterung der interaktiven Implementierung einer Baidu-ähnlichen Dropdown-Liste in vue 1.x

In Verbindung stehende Artikel

Mehr sehen