工具 | scroll下出现back to top


1. 首先 去设计》页面元素》添加小工具》HTML/Java Script

2. paste 以下的代码进去

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//** jQuery Scroll to Top Control script- (c) I made this script myself (Kyle Monk) and it is hosted on my personal site so would appreciate if you followed my blog at kylemonk.tumblr.com if you use it or for details on how to change the location.
//** Graphic originally from tumbler dashboard, for details on how to change graphic colour, contact me at kylemonk.tumblr.com
//** v1.1 (April 7th, 10'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.

var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="图片url" style="filter:alpha(opacity=70); -moz-opacity:0.1; width:33px; height:47px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:40, offsety:70}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }

    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })

        })

    }

}
scrolltotop.init()

</script>

3. 把红字的图片url 改成你要的图片网址 :) 蓝色改成图片宽度。粉红色改成图片高度

保存起来即可~简单到爆吧? XD

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

Today is a wonderful day :)

54 条评论:

  1. 因为我要换成cbox。

    我想问,要怎样去除掉
    -指向此帖子的链接-
    这个东西

    回复删除
  2. 就是看你的部落格没有才问你。

    以为你把它弄不见得

    回复删除
  3. Mr wenhui & Xiiao qii
    图片自己做吧~

    回复删除
  4. 那个教程做过了。

    什么功课?
    数学很多不会做。

    回复删除
  5. 失败了啦!!
    到底你怎样弄哒?

    回复删除
  6. 嘿,这个可以有!
    感谢分享,哈哈! =D

    回复删除
  7. 狮子:
    好久没‘看’到你了~哈哈

    QI:
    怎么会?别人都做到~

    回复删除
  8. 你好~请问你能教人如何用美图秀秀制作属于自己的CBOX吗?

    回复删除
  9. 不好意思,我不是用美图秀秀做的~

    回复删除
  10. 不好意思,我想問。 如何把會動的表情符號放進帖子裡 ?
    [從PHOTOBUCKET] :3

    回复删除
  11. 好容易哟!
    APPLE, 谢谢你!

    回复删除
  12. 请问可发个换post里的underline换成图片的教程吗?谢谢

    回复删除
  13. 拿了图片direct link,在图片里放图片时选来自网络就好了 :)

    回复删除
  14. 我的意思是这个>http://yes-apple.blogspot.com/2011/04/chess.html
    你的underline不是普通的一条线哦

    回复删除
  15. 我还是不是很明白要怎么弄哦 :(

    回复删除
  16. 不明白
    我放了那個東西,可是出現很多字在我哪裏

    回复删除
  17. milk yun
    什么意思?

    小兔子
    可以用软件做~~

    回复删除
  18. 图案不知道怎么找...烦恼~ @.@

    回复删除
  19. 怎样找到图片的高度和宽度呢??
    用google找图片能得嘛??
    T.T

    回复删除
  20. 可以,高度和宽度你就在图片上right click,按view image info那边有写多少乘多少的咯^^

    回复删除
  21. 照片放下去了 做么会有字的 ? TT

    回复删除
  22. 我弄到了但是为什么按它它没有飞上去的?

    回复删除
  23. Joanne
    可以用软件做^^

    Milk Yun
    有嘛?你的blog都没事的?

    回复删除
  24. Miko
    会不会是你的blog放太多东西了,
    鼠标转个不停耶~

    Xiiao TS
    这个教程很简单罢了~你不明白哪里呢?

    回复删除
  25. 你在图片那边right click > copy image location就好~

    回复删除
  26. 为什么没有图片出来的??没图片只是有格子罢了,,做么会酱的??

    回复删除
  27. http://i702.photobucket.com/albums/ww24/winnieliew123/wee7.gif

    回复删除
  28. Weng Yan
    你给图片网址干嘛?

    回复删除
  29. 哪里可以找到照片的URL呢?

    回复删除
  30. 你在图片那边right click > copy image location就好~

    回复删除
  31. 做到了><
    谢谢你噢~你好棒噢
    加油加油再加油XD

    回复删除

你的留言将在审核后发布。谢谢 ♥