实现回到顶部功能

原创 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>




jQuery实现返回顶部功能

jQuery实现返回顶部功能 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一、JSP或HTML(主体结构) 在body中添加 ...
  • itmyhome
  • itmyhome
  • 2014年05月13日 20:05
  • 4901

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

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

【Android】Scrollview返回顶部,快速返回顶部的功能实现,详解代码。

作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个...
  • qq_21376985
  • qq_21376985
  • 2016年09月12日 10:25
  • 4863

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

  • 2016年12月17日 15:32
  • 29.1MB
  • 下载

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

Android如何实现类似ios点击状态栏回到顶部功能
  • u010933680
  • u010933680
  • 2016年07月24日 17:43
  • 5885

实现页面的回到顶部功能

页面的几个属性介绍$(window).scrollTop():当前滚动的窗口顶端到整个页面窗口顶端的距离 $(window).scrollLeft():当前滚动的窗口左端到整个页面的窗口左端的距离 ...
  • qq_27905183
  • qq_27905183
  • 2017年05月04日 18:39
  • 274

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

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

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

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

回到顶部功能实现

CSS上主要注意的是要把posiition设为fixed。 JavaScript实现:window.onload = function () { var button = document....
  • winfredzen
  • winfredzen
  • 2016年03月21日 14:42
  • 354

利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能。废话不多说,下面就给出这么一个例子...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年09月17日 22:58
  • 492
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现回到顶部功能
举报原因:
原因补充:

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