返回顶部 - 原型 、优化

/*
 backtotop.js
 by sunhw 2014-12-2
 */
;
(function() {
    T.dom.ready( function() {
        var dom = T.get( ‘gototopwrap‘ ), timer = 0;
        var map = {
            scroH : 450,
            pageH : 230,
            ttl   : 500
        };
        if ( T.page.getViewHeight() < map.pageH || !dom ) {
            return;
        }
        var scrollHandle = function() {
            clearTimeout( timer );
            timer = setTimeout( function() {
                if ( T.page.getScrollTop() > map.scroH ) {
                    T.dom.setStyle( dom, "visibility", "visible" );
                } else {
                    T.dom.setStyle( dom, "visibility", "hidden" );
                }
            }, map.ttl );
        };
        T.un( window, ‘scroll‘, scrollHandle );
        T.on( window, ‘scroll‘, scrollHandle );

window.fixedIE6 && window.fixedIE6();
    } );
})();

/*
    backtotop.js
    by sunhw 2014-10-24
*/
;(function(){
    function BackTotop(option){
        this.map = {
            sh : 200, //getScrollTop
            ttl : 500, //延迟时间
            vh : 227 //getViewHeight
        };
        this.option = T.object.extend({
            root : ‘‘
        }, option || {});
        this.ie6 = T.browser.ie < 7;
        this.init();
    }
    BackTotop.prototype.init = function(){
        var me = this;
        if(T.page.getViewHeight() < me.map.vh) return;
        me.scrollHandle = function(){
            me.timer = null;
            clearTimeout(me.timer);
            if(me.ie6){
                if(T.get(‘gototopwrap‘)){
                    T.hide(‘gototopwrap‘);
                }
            }
            me.timer = setTimeout(function(){
                if(T.page.getScrollTop() > me.map.sh){
                    me.tpl = ‘<div class="gototop" id="gototopwrap"><a class="totop-btn" id="totopBtn" href="javascript:void(window.scroll(0,0));" hidefocus></a></div>‘;
                    if(!T.get(‘gototopwrap‘)){
                        T.dom.insertHTML(T.get(me.option.root), ‘afterBegin‘, me.tpl);
                    }
                    if(me.ie6){
                        if(T.get(‘gototopwrap‘)){
                            T.get(‘gototopwrap‘).style.top = (T.page.getViewHeight()-me.map.sh)+ T.page.getScrollTop() + ‘px‘;
                            T.show(‘gototopwrap‘);
                        }
                    }
                }else{
                    if(T.get(‘gototopwrap‘)){
                        T.dom.remove(T.get(‘gototopwrap‘));
                    }
                }
            }, me.map.ttl);
        };
        T.on(window, ‘scroll‘, me.scrollHandle);
    }
    T.dom.ready(function(){
        var gototop = new BackTotop({
            root : ‘footer‘
        });
    });
})();

时间: 2024-11-13 06:58:39

返回顶部 - 原型 、优化的相关文章

渲染优化 之fixed与返回顶部

fixed元素,常见网站右侧出现一个返回顶部的按钮,滚动的时候,会发现返回顶部这个区域在不停的进行重绘,而返回顶部是position:fixed定位的.这也解释了为什么fixed定位是最耗性能的属性之一 如何查看元素在不停的重绘呢?Chrome渲染分析工具 Rendering: 如上图,按F12调出开发者工具,然后按“ESC”(按2次)  调出Rendering界面. 1.Show paint rectangles 显示绘制矩形 2.Show composited layer borders 显

我要返回顶部

我觉得一个网站最不可少的小功能就是返回顶部了吧,尤其是那些长的要命,拉都拉不到尽头的,简直丧心病狂,如果没有返回顶部的按钮的话,鬼愿意原路拉回去,直接关掉走人.所以一个返回顶部的按钮还是需要的,当然,返回顶部也可以做出很多花样,本文只讨论如何返回,不管具体的外观样式,那都是后话. 以下是一些方法: 1. <a href='#'>返回顶部</a> ok,搞定,是不是觉得很坑爹,但我刚开始接触的时候就是用这个方法的,简单暴力直接,就是硬生生的直接跳回去,不好看,没有美感,而且直接这样不

扒皮下音悦台的“返回顶部”图标效果

昨晚想仿造下音悦台首页“返回顶部”的小超人效果,觉得这东西的实现很简单,应该不会费时超过一个钟.结果撸代码的过程发现存在很多意想不到的问题. 先发个图: 有兴趣的朋友可以去音悦台点一下这个小超人图标试一试,默认是隐藏的,滚动条下拉一小段距离后会从下面飞上来悬停在右下角,点击的时候不但浏览器滚动条会返回顶端,小超人也会往上飞到顶部消失掉. 不过我印象中,以前若鼠标移到图标上,小超人会变成一个动态(小超人的披风会摆动)的gif图,不过现在取消了这效果,可能是因为gif毕竟不是png,多少带有些锯齿影

返回顶部/底部3

<!DOCTYPE html> <html lang="en"> <head> <title>返回顶部/底部</title> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"

返回顶部和底部(动画)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

原生JS返回顶部,带返回效果

有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id: 之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器: 之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度: 再用一个判断语句来判断一下滚动的高度:我们在设置一个数来让按钮什么时候显示: var o

JavaScript之返回顶部

为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hexo上感觉浪费了很多的时间,毕竟Hexo对我来说还是高大尚的东西,适可而止. 好了!我还是好好搞自己基础的东西吧,做自己该做的事就可以了. 我们回到这章话题,我们都知道都看到过,很多页面都会有“返回顶部”,方便快捷. 到页面底部 返回页面顶部

jquery返回顶部,支持手机

效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 为此,移动端判断次数好些,下面是具体实现代码,兼容pc: <!DOCTYPE html> <html> <head> <meta http-

原生js实现简洁的返回顶部组件

本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~ 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置.实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可.本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果