实现回到顶部功能

原创 2015年11月17日 19:10:59

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">参考实现demo : </span><a target=_blank href="http://www.cnblogs.com/beyondfengyu/archive/2013/03/28/2987823.html" target="_blank" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">jQuery实现回到顶部功能</a>

利用jQuery实现回到顶部功能,主要是用到了元素的定位属性(scrolltop等),参考文章 :JQuery Div scrollTop ScrollHeight

另一方面也学习了从background-position的方法(抠图),参考文章 : CSS从大图中抠取小图完整教程(background-position应用)

1.html页面代码

<body>
    <div class="gotoTop"></div>
    <h1>Testing div Demo: GO TO TOP!</h1>
    <div class="container">
       噼里啪啦一段大段文字,可以放一片自己喜欢的散文,吼吼哈。。
    </div>
</body>
2.css代码

<style>
    body{
        padding:0;
        background-color:#aaa;
    }
    .container{
        margin-left: 50px;
        margin-right: 50px;

        background-color: #fff;
        color:#c0c0c0;
        font-size:18px;
        letter-spacing: 4px;

        padding:10px;
        border-radius: 10px;
    }
    .gotoTop{
        display: none;
        position: fixed;
        right: 10px;
        bottom: 10px;

        width:50px;
        height:50px;

        background: #fff url(img/goTopOne.png) -70px 0;
    }
    .gotoTop:hover{
        background: #fff url(img/goTopOne.png) 0 0;
    }
</style>
3.js代码

<script>
    function gotoTop(){
        console.log("come in function gotoTop.");
        $(window).scroll(function(){
            console.log("scroll function.");
            if($(window).scrollTop() >100){
                $(".gotoTop").fadeIn(500);
            }else{
                $(".gotoTop").fadeOut(500);
            }
        });
    }

    $(function(){

        $(".gotoTop").click(function(){
            $('body,html').animate({scrollTop:0}, 1000);
        });

        gotoTop();
    });
</script>




相关文章推荐

javascript实现页面中回到顶部功能

当一个页面比较长的时候,在下拉页面到一定长度的时候,页面右下角通常会出现一个回到顶部的图标,点击即可以回到页面顶部,本案例对这一功能进行了简单实现。当页面下拉到一定长度后,页面右下角出现一个回到顶部图...

WinRT中实现回到列表顶部功能

WinRT中常用的数据列表显示控件大略就是ListBox,ListView,GridView。在应用中,有的时候用户在长时间浏览 列表内容之后想回到列表顶部,那么针对于这种需求该如何实现呢? 最重...

回到顶部功能实现

CSS上主要注意的是要把posiition设为fixed。 JavaScript实现:window.onload = function () { var button = document....

android如何实现类似ios点击状态栏回到顶部功能

Android如何实现类似ios点击状态栏回到顶部功能

实现页面的回到顶部功能

页面的几个属性介绍$(window).scrollTop():当前滚动的窗口顶端到整个页面窗口顶端的距离 $(window).scrollLeft():当前滚动的窗口左端到整个页面的窗口左端的距离 ...

jQuery 实现小功能之回到顶部

使用jQuery自定义插件进行功能拓展, 实现’回到顶部’这个小功能 【backToTopIndex.html】 jQuery 实现回到顶部 ...

android新特性:商城首页一键回到顶部功能实现(包括ListView, RecyclerView 和 ScrollView)

一般只要做商城的大家都知道或都见过有个悬浮按钮,当你向下滑动到一定的位置的时候他就会乖乖的弹出了!当你点击一下他就会跳转到页面的顶部(其实可以是任何位置的),在顶部的时候他就会乖乖的消失。当然大家自己...

android 实现了知乎日报的大部分功能,增加双击标题栏回到顶部以及双击 webview 返回两个实用功能

android 实现了知乎日报的大部分功能,增加双击标题栏回到顶部以及双击 webview 返回两个实用功能...

类似ios点击状态栏回到顶部功能

  • 2016年07月24日 17:37
  • 20.59MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现回到顶部功能
举报原因:
原因补充:

(最多只允许输入30个字)