jQuery回到顶部的代码

时间: 作者:量同

  

[jquery回到顶部]jQuery回到顶部的代码

  

在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果。感兴趣的朋友跟着小编一起看下实现代码吧。

  

  

首先需要在顶部添加如下html元素:  

  
  
  

返回顶部

  
  

其中a标签指向锚点top,可以在顶部防止一个的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。

  

  

要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:  

  
  
  /*returnTop*/  p#back-to-top{  position:fixed;  display:none;  bottom:100px;  right:80px;  }  p#back-to-top a{  text-align:center;  text-decoration:none;  color:#d1d1d1;  display:block;  width:64px;  /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/  -moz-transition:color 1s;  -webkit-transition:color 1s;  -o-transition:color 1s;  }  p#back-to-top a:hover{  color:#979797;  }  p#back-to-top a span{  background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;  border-radius:6px;  display:block;  height:64px;  width:56px;  margin-bottom:5px;  /*使用CSS3中的transition属性给标签背景颜色添加渐变效果*/  -moz-transition:background 1s;  -webkit-transition:background 1s;  -o-transition:background 1s;  }  #back-to-top a:hover span{  background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;  } 
  
  

  上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:  

  

go-top-icon go-top-icon2go-top-light-green go-top-green go-top-yellow  

  

有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。

  

  
  
  $(function(){  //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失  $(function () {  $(window).scroll(function(){  if ($(window).scrollTop()>100){  $("#back-to-top").fadeIn(1500);  }  else  {  $("#back-to-top").fadeOut(1500);  }  });  //当点击跳转链接后,回到页面顶部位置  $("#back-to-top").click(function(){  $('body,html').animate({scrollTop:0},1000);  return false;  });  });  });  
  
  

这样就可以了。

  

  

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

  

  

下面在给大家分享一段jquery回到顶部代码  

  

1. 页面内容较多, 从底部超链接 点击回到页面顶部  

  
  
  // 回到顶部  var $top = $('TOP')  .on('click', function () {  $(window).scrollTop(0);  return false;  });  $('body').append($top);
  
  

  

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


HOME | 常用代码 | css特效

Copyright © 2020-2022 齐天娱乐 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 齐天娱乐