js css实现回到顶部按钮（回到顶部)

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

效果

超文本标记语言

p id='背靠背a href='#top'span/span/a/pcss

p #背对顶{ position : fixedbottom :100 pxright :80 px } p #背对顶{ text-align :居中；文本装饰：无；颜色： # D1 D1；显示：块；宽度：30 px/*使用CSS3中的过渡属性给跳转链接中的文字添加渐变效果*/-moz-transit :颜色1s；-web套件-transit :彩色1s；-o-transit :彩色1s；} p #回到顶部a : hover { color : # 979797 } p #背靠背span { background: # d1d1d1 url(./images/arrow_up.png)无重复中心中心；边界半径：6 px显示：块；高度：30 px宽度：30 px边距-底部：5 px/*使用CSS3中的过渡属性给跨度标签背景颜色添加渐变效果*/-moz-transit :后台1s；-web套件-transit :后台1s；-o-transit :背景1s；} #从头到尾a :悬停跨度{ background:#979797 url(./images/arrow_up.png)无重复中心中心；}js

脚本类型='text/javascript'$(文档)。就绪（函数(){ //首先将#从头到尾隐藏$(' #背靠背')。hide()；//当滚动条的位置处于距顶部600像素以下时，跳转链接出现，否则消失$(函数(){ $(窗口))。滚动（函数(){ if ($(window)).scrollTop()600){ $(' #背靠背')。法丁(500);} else { $(' #从头到尾').淡出(500)；} });//当点击跳转链接后，回到页面顶部位置$(' #背靠背')。单击(function(){ $('body，html ').动画({scrollTop:0}，500)；返回false })；});});/script以上就是本文的全部内容，希望对大家的学习有所帮助。