最新推荐文章于 2022-06-20 20:06:32 发布

Android_Wong

最新推荐文章于 2022-06-20 20:06:32 发布

阅读量1.4k

点赞数

分类专栏：简单返回顶部文章标签： function mootools jquery scroll html 新浪微博

简单同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

返回顶部

1 篇文章 0 订阅

订阅专栏

最近做了一个排行榜页面，分类较多，并且以图文形式展示......最后页面明显过长了，用户体验自然不够好。最后想着在页面上部增加了页面内跳转导航，直接导航到本页的分类命名锚块。当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长，内容薄弱关联性不够的跳出率会很高。

下面就说下简单的返回顶部效果的代码实现，附注释说明。

1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能

方法一：用命名锚点击返回到顶部预设的id为top的元素

<a href="#top" target="_self">返回顶部</a>

方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）

<a href="javascript:scroll(0,0)">返回顶部</a>

缺点：返回效果是立即的，不符合一般浏览页面的滚动感觉；

静态固定于页面底部，用户不一定看得到。

2. 简单的静态返回顶部，用js模拟滚动效果上滑至顶部

function pageScroll(){
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    window.scrollBy(0,-100);
    //延时递归调用，模拟滚动向上效果
    scrolldelay = setTimeout('pageScroll()',100);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
    var sTop=document.documentElement.scrollTop+document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if(sTop==0) clearTimeout(scrolldelay);
}

<a οnclick="pageScroll()">返回顶部</a>

缺点：滚动效果不平滑，且在页面很长时点击返回顶部，未向上到达页面顶部无法再正常浏览页面；

同上依旧是静态固定于页面底部，不一定能曝光在用户面前。

3. 动态按需加载返回顶部，css侧边屏幕绝对定位，结合简单jQuery动画实现更好体验

function gotoTop(min_height){
    //预定义返回顶部的html代码，它的css样式默认为不显示
    var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
    //将返回顶部的html代码插入页面上id为page的元素的末尾 
    $("#page").append(gotoTop_html);
    $("#gotoTop").click(//定义返回顶部点击向上滚动的动画
        function(){$('html,body').animate({scrollTop:0},700);
    }).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
        function(){$(this).addClass("hover");},
        function(){$(this).removeClass("hover");
    });
    //获取页面的最小高度，无传入值则默认为600像素
    min_height ? min_height = min_height : min_height = 600;
    //为窗口的scroll事件绑定处理函数
    $(window).scroll(function(){
        //获取窗口的滚动条的垂直位置
        var s = $(window).scrollTop();
        //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
        if( s > min_height){
            $("#gotoTop").fadeIn(100);
        }else{
            $("#gotoTop").fadeOut(200);
        };
    });
};
gotoTop();

/*默认样式，主要是position:fixed实现屏幕绝对定位*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}
/*用CSS表达式(expression)来实现ie6下position:fixed效果*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}
/*鼠标进入的反馈效果*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}

这种方法判断页面高度按需将“返回顶部”展示给用户，用css样式实现了屏幕绝对定位，借助jQuery实现了更好用平滑的滚动效果。进一步考虑如果用户设置了浏览器禁用js，那么我们可以将第三方案结合第一方案方法一，禁用js后第三方案将不被用户所见，未禁用的话我们在js代码中再加上一句隐藏第一方案。

总之，长页面还是要尽量避免的，不可避免的情况下，加上“返回顶部”功能可能会带给用户相对好一点的体验。

----------------------------------------------------------------------------------------------------------------------------------------------------------

返回顶部代码

在web页面中，如果页面较高，为了方便用户快速地返回顶部，都会添加一个返回顶部按钮。例如：

其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮；人人网的返回顶部直接在底部的工具条上；新浪微博的返回顶部在滚动高度大于0的时候显示，且返回顶部的效果是平滑动画效果。本文的实现就是类似于新浪微博的这种效果。//zxx:新浪微博今天启用新域名weibo.com了

二、jQuery下的返回顶部功能

您可以狠狠地点击这里：jQuery下的返回顶部demo

可以看到，如果页面有滚动高度，右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条，如下图所示：

点击这里“返回顶部”字样的按钮后，页面就像是抹了润滑剂一样，倏地一声就滑到顶部了，同时，该点击按钮也玩起了躲猫猫 – 不见了。

实现的原理嘛，恩……估计鲜有人关心，所以我也懒得浪费口水了，直接上代码。

无论是这里的jQuery实现还是MooTools实现，下面的CSS代码都是一致的，如下：

.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}

js相关代码如下：

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();    
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);    
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();

寥寥十几行代码就实现了全部的交互细节了。您可以将上面代码直接拷贝到您的JavaScript文件中，页面就有效果啦！对了，请使用jQuery 1.4+。

三、MooTools下返回顶部功能实现

您可以狠狠地点击这里：MooTools下的返回顶部demo

demo页面的效果与上面jQuery demo下效果基本一致。

代码部分。CSS代码完全同上。JS代码如下：

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", {
        "class": "backToTop",
        title: $backToTopTxt    
    }).set("text", $backToTopTxt).addEvent("click", function() {
        var st = document.getScroll().y, speed = st / 6;
        var funScroll = function() {
            st -= speed;
            if (st <= 0) { st = 0; }
            window.scrollTo(0, st);
            if (st > 0) { setTimeout(funScroll, 20); }
        };
        funScroll();
    }).inject(document.body), $backToTopFun = function() {
        var st = document.getScroll().y, winh = window.getSize().y;
        (st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");    
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.setStyle("top", st + winh - 166);    
        }
    };
    window.addEvents({
        scroll: $backToTopFun,
        domready: $backToTopFun
    });
})();

直接拷贝上面的代码在您的JS代码中就轻松实现效果啦。

MooTools的动画方法Fx不支持滚动，要实现滚动条的平滑滚动效果需要使用Fx.Scroll插件。但是，显然，这里的简单功能没有必要再使用额外的插件，所以直接设置了个定时器实现了平滑滚动效果。

注：demo页面中的美女图片作用是撑开页面高度使产生滚动条。

<script type="text/javascript" src=">
<script>
(function() {
 var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
  .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
   $("html, body").animate({ scrollTop: 0 }, 120);
 }), $backToTopFun = function() {
  var st = $(document).scrollTop(), winh = $(window).height();
  (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
  //IE6下的定位
  if (!window.XMLHttpRequest) {
   $backToTopEle.css("top", st + winh - 166); 
  }
 };
 $(window).bind("scroll", $backToTopFun);
 $(function() { $backToTopFun(); });
})();
</script>

Android_Wong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【返回顶部】简单返回顶部代码及注释说明

最近做了一个排行榜页面，分类较多，并且以图文形式展示......最后页面明显过长了，用户体验自然不够好。最后想着在页面上部增加了页面内跳转导航，直接导航到本页的分类命名锚块。当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长，内容薄弱关联性不够的跳出率会很高。下面就说下简单的返回顶部效果的代码实现，附注释说明。1. 最简单的静态返回顶部，点击直接跳转页
复制链接

扫一扫