Heim >Web-Frontend >js-Tutorial >js+css zum Implementieren von button_javascript-Fähigkeiten

js+css zum Implementieren von button_javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:12:371736Durchsuche

Das Beispiel in diesem Artikel stellt die Methode zur Implementierung der Schaltfläche „Zurück nach oben“ mit js+css vor und teilt sie Ihnen als Referenz mit. Der spezifische Inhalt ist wie folgt:

Wirkung

html

<p id="back-to-top"><a href="#top"><span></span></a></p>

css

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

js

<script type="text/javascript">
$(document).ready(function(){
 //首先将#back-to-top隐藏
 $("#back-to-top").hide();
 //当滚动条的位置处于距顶部600像素以下时,跳转链接出现,否则消失
 $(function () {
  $(window).scroll(function(){
   if ($(window).scrollTop()>600){
    $("#back-to-top").fadeIn(500);
   }else{
    $("#back-to-top").fadeOut(500);
   }
 });
 //当点击跳转链接后,回到页面顶部位置
 $("#back-to-top").click(function(){
  $('body,html').animate({scrollTop:0},500);
   return false;
  });
 });
});
</script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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