泪划痕
Best viewed in Google Chrome

2011年8月1日星期一

Scroll to top


就像上图(红箭头所示),鼠标按back to top 图片,就会慢慢浮上去最后消失在顶部。
----------------Start-----------------Photobucket

信息中心 - 设计 - 页面元素 - 添加小工具 - HTML/Javascript

 HTML/Javascript 里添加以下代码。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 


var scrolltotop={
   setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="图片网址" style="filter:alpha(opacity=70); -moz-opacity:0.1;" />', 
    controlattrs: {offsetx:0, offsety:0}, 
    anchorkeyword: '#top', 
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) 
            this.$control.css({opacity:0}) 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) 
            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()!='') 
                mainobj.$control.css({width:mainobj.$control.width()}) 
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })


        })


    }


}
scrolltotop.init()


</script>
-----------------小提示----------------Photobucket
* 红色字体 = Back to top 的图片网址

51 道泪痕:

→I'm Leng← 说...

成功了!

谢谢! :D

悦枫_♥ bibi 说...

图片网址是哪个?direct link?

独泪 说...

→I'm Leng←
不客气^^

悦枫_♥ bibi
是的啊^^

錒威 说...

可以给我你现在用的这个的link吗??我很喜欢><

独泪 说...

你是说我现在的图片link吗@@?
是这个哦,
http://3.bp.blogspot.com/-vXjUq8YswAQ/Tk_7O0aUwgI/AAAAAAAAEIw/toa4y-GBqX8/s1600/JiaoZiZiZi02_5.gif

錒威 说...

有了^^谢谢你啊 很可爱♥

錒威 说...

对了,你这个图片是在哪里找的??可以给我吗?

独泪 说...

我忘记是哪里网址找了,是谷歌搜出来的 =)

錒威 说...

哦哦,没关系 :)

独泪 说...

好的 =)

Ern❤ 说...

take^^

Etsuko . ♥ 说...

take

Grace`Hii♀阿晶 说...

可以有其他的图片link吗? > <

独泪 说...

Ern❤
好的^^

Etsuko . ♥
kk~=D

Grace`Hii♀阿晶
嗯,图片可以到 素材系列找 =)

Grace`Hii♀阿晶 说...

谢谢你!!=D <3

独泪 说...

不客气 =D

洁慈 说...

请问是只要放了图片的link就能了吗?为什么我的看不到图片?是不是不行?
www.jiecilim-jc.blogspot.com
《请多多指教》

独泪 说...

是的 =)
这个 你可以看看我的 效果哦,
在上面的时候是看不到的,拉下来后才看到 那个 “兔子”的图案 =)

雯雯 说...

可以放在左边吗?

Kiang kiang ^^ 说...

弄到了~
3Q~❤

独泪 说...

雯雯
在scroll to top代码CTRL+F找 right
把right 换成left

Kiang kiang ^^
不客气,谢谢通知 ^^

雯雯 说...

改了直接没图片出来><

雯雯 说...

弄到了~谢谢:)

独泪 说...

好的不客气 :)

Shinn Wei 说...

拿了:]

独泪 说...

好的谢谢通知~ ^^

錒威 说...

独泪!!
zomok我弄的蜡笔小新看起来将肥的/\
我美图的时候他是很瘦很标准的勒 TT

Kyann♥ 说...

拿了你那个UP的图片 :]

独泪 说...

錒威
唔,蜡笔小新不是本来就是肥的么 /口\
可以在这个scroll to top代码 CTRL+F找

width:92px; height:74px

把它删掉就可以了 =)

Kyann♥
好的,谢谢你的通知 ^^

錒威 说...

我比较喜欢他大个一点嘛 ;D
那他现在的大小就是我自己弄得大小对吗?

笨蛋MiCky 说...

弄到了^^
谢谢您❤

独泪 说...

錒威
嗯嗯,对~

笨蛋MiCky
不客气,恭喜成功 ^^

慧妮 说...

拿、成功了:)

独泪 说...

哈哈,恭喜成功^^

Jee jo 说...

弄到了~谢谢!:)

香草 说...

成功!!!
这个真是太棒了!
无话可说,一个字。。。赞!!!!!!!!!!!!!

☆星暶★ 说...

非常成功!谢啦~~ :]

≮G14׺w3sky≯ 说...

感谢~非常的成功~~ ^^

♥ 牛奶妹 ♥ 说...

拿走了 ^^ 谢谢

Wendy Chew 说...
此评论已被作者删除。
fangfang 说...

什么叫scroll ??

Wendy 说...

为什么我不能的

泪泪能帮我看下吗

juzmiiwendy.blogspot.com

我会很感谢你的

:)

× Ah Sze × 说...

謝謝你、拿走咯!!

Andy_Winnie 说...

成功了,,谢谢=)

yumi 说...

拿走了~ :)

HO PEI YEE 说...

成功!谢谢哦^^

晴。天。 说...

成功!谢谢啦~

Xiiao Hooi 说...

我想问下,如果要放hello kitty的要怎样?

Ding Wen Xin 说...

请问如果要放在左边呢?

Xin Yu 说...

请问 那个图片箭头指向它是他可以隐藏起来?

沉睡の小孩 说...

拿了 :)

发表评论