一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery实现返回顶部效果代码

时间:2013-09-14 编辑:简简单单 来源:一聚教程网

jquery中返回顶部核心代码就是

 代码如下 复制代码

// Back To Top
$(document).ready(function(){
  $('.top').click(function() { 
     $(document).scrollTo(0,500); 
  });
});

//Create a link defined with the class .top
Back To Top

下面我们看一个返回顶部实例


1、样式设置:

 代码如下 复制代码

#toTop {
       /*选中的背景图片的大小*/
    width: 54px;
    height: 54px;
    display: none;/*刚开始不显示*/
    position: fixed;
    right: 25px;/*距离右边大小值*/
    bottom: 45px;/*距离底部大小值*/
       /*选定图片区域*/
    background-image: url(images/qqbg_1.5.5.png);
    background-repeat: no-repeat;
    background-position: -700px -110px;
    opacity: 0.3; /*透明度*/
}

#toTop:hover {
    opacity: 1;/*悬停时不透明*/
    filter: alpha(opacity = 100);
}

2、JS代码:

 代码如下 复制代码


热门栏目