现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现。点击他会直接跳到页面的顶端。代码如下:

html代码:

<div id="top">
        <p id="back-to-top"><a href="#top"><span><img src="data:images/gotop.jpg"></span>返回顶部</a></p>
</div>

css代码:

p#back-to-top{position:fixed;display:none;bottom:100px;right:10px;overflow: hidden;}
p#back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;-moz-transition:color 1s;-webkit-transition:color 1s;-o-transition:color 1s;overflow: hidden;}
p#back-to-top a:hover{color:#979797;}
p#back-to-top a span{display:block;height:50px;width:50px;margin-bottom:5px;-moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
#back-to-top a:hover span{overflow: hidden;}
#back-to-top a span img{border:none;width: 50px;height: 50px;}

jquery代码:

/*top特效*/
        $.fn.smartFloat = function() {
            var position = function(element) {
                var top = element.position().top, pos = element.css("position");
                $(window).scroll(function() {
                    var scrolls = $(this).scrollTop();
                    if (scrolls > top) {
                        if (window.XMLHttpRequest) {
                            element.css({
                                position: "fixed",
                                top: 0
                            });
                        } else {
                            element.css({
                                top: scrolls
                            });
                        }
                    }else {
                        element.css({
                            position: "absolute",
                            top: top
                        });
                    }
                });
            };
            return $(this).each(function() {
                position($(this));
            });
        };
        //绑定
        $("#down").smartFloat();

回到顶端的jquery的更多相关文章

  1. js监听滚动条 回到顶端

    效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...

  2. 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  3. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  4. 点击回到顶部(jQuery)

    写这个点击回到顶部.我采用的是最简单的jQuery,的点击事件  和animate特效. html部分 <div class="pulltop"> <img sr ...

  5. csdn回到顶端

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 回到顶端js实现

    function goTop(){ var _btn = document.getElementById("goTop"); if (document.documentElemen ...

  7. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  8. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  9. jquery 第三章

    1.回顾$(document).ready(function(){    })$(function(){    }) ID选择器.类选择器.元素选择器层次选择器:空格(上文下:tr td{})属性过滤 ...

随机推荐

  1. CSS Sprites (css精灵)

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

  2. Git基础教程(一)

    本教程为学习笔记,github作为最受欢迎的资源库,不可不学!详细教程参见:廖雪峰的官方网站Git教程系列.准备花两篇幅搞定实战总结,闲言碎语少说,脚踏实地求真! 1,Git入门       Git是 ...

  3. leetcode HouseRobber Dp Code

    #include <malloc.h> int MAX(int x,int y){ return x>y?x:y;} int rob(int* nums, int numsSize) ...

  4. Bootstrap学习-环境安装

    1.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 让IE运行最新的渲染模式. 2.&l ...

  5. 2272: [Usaco2011 Feb]Cowlphabet 奶牛文字

    2272: [Usaco2011 Feb]Cowlphabet 奶牛文字 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 138  Solved: 97 ...

  6. Java设计模式之职责型模式总结

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6548127.html 所谓职责型模式,就是采用各种模式来分配各个类的职责. 职责型模式包括 ...

  7. 谈谈数据库中MyISAM与InnoDB区别 针对业务类型选择合适的表

    MyISAM:这个是默认类型,它是基于传统的ISAM类型, ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法. ...

  8. 运行错误:应用程序无法启动因为并行配置不正确。the application has failed to start because its side-by-side configuration is incorrect 解决方法

    问题描述: 当电脑同时安装VS2008和VS2008 SP1时,编译出来的Visual C++程序的manifest 文件会默认引用VS2008的MFC版本和CRT版本.如下: <depende ...

  9. AutoIt 脚本小试——刷网易云音乐歌单

    AutoIt 确实是个很强大的脚本工具. 如果早知道有这个,当初是怎么都不会去学易语言的  (๑•̀ω•́๑) 这是个简单脚本 = ๛ก(ー̀ωー́ก) 用来增加歌单播放次数和个人的听歌量. 原理不过 ...

  10. IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS

    1.购买SSL证书,参考:http://www.cnblogs.com/yipu/p/3722135.html 2.IIS7 / IIS 7.5 下绑定 HTTPS 网站(购买Wildcard SSL ...