文档章节

返回顶部的js实现(jQuery/MooTools)

完美世界
 完美世界
发布于 2014/06/05 16:41
字数 870
阅读 52
收藏 0
/*回到顶部*/
$(function(){
    $(“#goTop”).click(function(){
       $(“html, body”).animate({ scrollTop: 0 }, 120);
    });
});

返回顶部的js实现(jQuery/MooTools)

一、引言

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

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

二、jQuery下的返回顶部功能

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

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

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页面中的美女图片作用是撑开页面高度使产生滚动条。

本文算是个实用小技术,内容不多,希望能对您的学习有所帮助。感谢阅读。

转自张鑫旭-鑫空间-鑫生活

原文地址:http://www.zhangxinxu.com/wordpress/?p=1576


本文转载自:http://www.zhangxinxu.com/wordpress/?p=1576

共有 人打赏支持
完美世界
粉丝 10
博文 151
码字总数 134011
作品 0
西城
高级程序员
mootools,jquery,dojo

最近,我开始关注Dojo了,Dojo是一个强大的面向对象JavaScript框架,既然我那么喜欢MooTools,也没理由不喜欢Dojo。与Dojo相比我对MooTools 和 jQuery 是比较熟的。这并不重要,不管使用什么样...

水稻
2015/01/20
0
0
jQuery和MooTools的真正区别

引言 自己一直在用MooTools框架, 偶然看见这篇文章,作者是MooTools Team的成员之一,讲解了jQuery和MooTools的一点点区别,主要是我觉得他写JavaScript代码和他的思维方式很值得学习。另外...

zplswf
2012/06/07
0
0
JS弹框,支持ajax调用、拖拽,jquery、mootools两个版本

JS弹窗,有jquery和mootools两个版本 要求:jquery版本>=1.2.6,mootools用最新版本 先看截图啊: 在firefox、chrome、高版本ie下:有阴影、圆角效果 调用方法: <input type="button" value...

遊坦之
2012/07/26
0
0
jQuery与mootools共存冲突解决

jQuery与mootools共存冲突解决 方式一: <html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); // Use jQuery via jQuer......

GIFCOOL
2013/04/15
0
0
大胆预测下几个JavaScript框架的走势

Posted on September 21st, 2008 in 前端开发 by lifesinger MooTools将在接下来的几年内像jQuery一样迅速窜红 而jQuery则会慢慢销声匿迹 YUI将不尴不尬的活着,YUI 3.x将成为小部分人的玩物...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内存模型是怎么解决缓存一致性的?

在再有人问你Java内存模型是什么,就把这篇文章发给他。这篇文章中,我们介绍过关于Java内容模型的来龙去脉。 我们在文章中提到过,由于CPU和主存的处理速度上存在一定差别,为了匹配这种差距...

Java填坑之路
16分钟前
1
0
vue-cli 3.0 初体验

最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。 安装步骤: 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-...

tianyawhl
18分钟前
0
0
Angular进阶之路

【初级】会写页面,能出东西。 给定环境和 rest API,不用第三方库,能在十分钟内完成一个 master/detail 结构的带路由的应用(可以不管美观)。 知识点:Angular CLI、组件、路由、HTTP 服务...

陆小七的主页
20分钟前
0
0
Redis缓存数据库安全加固指导(一)

背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一位,但是原生...

中间件小哥
20分钟前
0
0
百万级数据mysql分区

1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分。从逻辑上看,只有一张表,但是底层却是由多个物理分区组成。 2. 表分区与分表的区别 分表...

罗文浩
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部