很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。

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

<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>

其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持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属性给<span>标签背景颜色添加渐变效果*/
    -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;
}

  

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

   

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

<script>
$(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;
            });
        });
    });
</script>

这样就可以了,你可以通过下面的地址观看实际的效果:

http://outofmemory.cn/code-snippet/tagged/javascript

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

js+JQuery实现返回顶部功能的更多相关文章

  1. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  2. 转载:jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  3. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  4. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

  5. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  6. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  7. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  8. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  9. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

随机推荐

  1. RapidFloatingActionButton框架正式出炉

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4474748.html RapidFloatingActionB ...

  2. Android Studio简单设置

    IDE外观&行为 修改主题,修改全局字体 修改主题,想用炫酷的深色主题,就改成Darcula吧:字体的话,选一个带中文的,要不然会有很多口口,我这里用Microsoft YaHei UI,很不 ...

  3. socket编程中服务器端常用函数 以及简单实现

    1 常用函数 1.1   socket() int socket(int family, int type, int protocol); socket()打开一个网络通讯端口,如果成功的话,返回一个 ...

  4. symfony2 安装并创建第一个页面

    1.安装和配置 参考 http://symfony.cn/docs/book/installation.html 使用安装工具: windows系统 Open your command console ...

  5. 1.2 《硬啃设计模式》 第2章 学习设计模式需掌握的UML知识

    要看懂设计模式,你需要懂类图(Class Diagram),也需要懂一点对象图(Object Diagram),下面介绍一些UML的必要知识,以便你学习设计模式. 属性.操作 下图简单介绍类的属性和操 ...

  6. IT软件开发常用英语词汇

    Aabstract 抽象的abstract base class (ABC)抽象基类abstract class 抽象类abstraction 抽象.抽象物.抽象性access 存取.访问access ...

  7. EMLS项目推进思考

    解决难度从小到大来看: 一.技术与运营层面1. 到企业级层面需要的技术与运营的支撑________前端推送__________________|________后台支撑系统_________|____ ...

  8. view组件的duplicateParentState属性

    今天做页面的时候遇到一个小问题,在点击的时候改变组件的图片来源,这个很简单大家都知道,用selector可以很快实现.但是现状有点特殊,是 LinearLayout 中包裹着一个 ImageView ...

  9. maven-shade-plugin

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  10. jquery.validate remote的用法

    1,远程返回数据时,一定要返回"true"或者"false",否则就是永远就是验证不通过. 2,remote有两种方式,如下就介绍remote与PHP间的验证( ...