Wednesday, June 9, 2010

Back To Top代码

Share



刚打错字~原本是[Back To Top代码]我打成Back To Top大妈=X
这个东西你在我的部落格右下角就能看到了~只要点击一下
就能回到页面的最上方~


首先到Design-->Edit HTML
在键盘上按Ctrl+F找]]></b:skin>
然后在它上面放以下的代码

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}


好了之后,就再一次使用Ctrl+F的搜索框寻找</body>
将以下的代码放在</body>上面


<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png" alt="back to top" /></a>

红色部分是Back To Top的图片,你可以自行更改


还没有完哦~
接着你在使用Ctrl+F寻找<head>
<head>下面放上以下代码


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>


完成~这时候你就可以Preview看一下了~
记得上下要分清楚哦~

By;kenchy

14 comments:

[ J e a l o u s ] said... 回复此评论

那个图案怎样换?

Kenchy said... 回复此评论

上面我已经说了?@@

[红色部分是Back To Top的图片,你可以自行更改]

☜ღ维♥独♥弦ღ☞ said... 回复此评论

♥弄到了,谢谢=]♥

♀米修♥依琳♂ said... 回复此评论

我弄不到

Kenchy said... 回复此评论

@♀米修♥依琳♂
是那个步骤不明白吗?

♀米修♥依琳♂ said... 回复此评论

我把代码copy进去了,我save了,我preview没有的

Kenchy said... 回复此评论

@♀米修♥依琳♂

将页面拉到最底下还是没有吗?

♀米修♥依琳♂ said... 回复此评论

没有哦

Kenchy said... 回复此评论

你确定有放对地方吗?@@
例如上下有没有分清楚

♀米修♥依琳♂ said... 回复此评论

有啊

Kenchy said... 回复此评论

@♀米修♥依琳♂

建议你让我看你的背景代码=)

Diana said... 回复此评论

我也是弄不到……
呜呜,好伤心哦……

Kenchy said... 回复此评论

弄不到的,给我一点时间,我之后开一个新的教程给你们=)

Kenchy said... 回复此评论

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment