Home  >  Article  >  Web Front-end  >  js+css实现回到顶部按钮(back to top)_javascript技巧

js+css实现回到顶部按钮(back to top)_javascript技巧

WBOY
WBOYOriginal
2016-05-16 15:12:371600browse

本文实例介绍了js+css实现回到顶部按钮的方法,分享给大家供大家参考,具体内容如下

效果

html

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属性给标签背景颜色添加渐变效果*/
  -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

以上就是本文的全部内容,希望对大家的学习有所帮助。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn