Miscellaneous Hacks - Create "Back to top" button using jQuery in one step.

Demo: http://noct-test.blogspot.com/2011/01/ai-duong.html

Instruction:
Find template footer.

Insert at the end.

<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Done. :up:
Hope you like it !

[davut_c20]

Great. Thank You

[zascok]

nice one. If I may add

{vb:rawphrase top}

instead of BACK TO TOP in

<div id='bttop'>BACK TO TOP</div>

[xixxon]

Originally Posted by zascok

nice one. If I may add

{vb:rawphrase top}

instead of BACK TO TOP in

<div id='bttop'>BACK TO TOP</div>

Hehe, whatever u want

[zascok]

Originally Posted by xixxon

Hehe, whatever u want

I though so so here is what I have done

in headiclude before that < script yahoo blah-blah-blah > a add this as i'm using it for something else as well

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

then I put this into additional.css

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

Wait for it....

in the footer on the very end as you said

<vb:if condition="$show['member']">
<div id='bttop'><img src="./images/misc/gotop.png" alt="{vb:rawphrase top}" height="72" width="72"/> </div>

<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},900);});});</script>
</vb:if>

Yup, don't wanna guests playing with that and also I think an image is better

P.S.> sure I got an opensourse icon from opensoure-icon-web-site and up it into images/misc folder

Thanks again

Kinda lost the concept of one step but I like the things in own place it helps avoiding duplicate redundancies

[CrossWind]

Thanks a nice idea
Code works fine with VB4

But does not work with VB3
Please tell me how to make it work with VB3

with my best regards

[sub_ubi]

Awesome mod we love it.

Just one problem with VB CMS on our home page its interfering with our slider vFCoders - Featured Content Slider Widget (was not able to change images/articles.

Is there an easy way to exclude/disable it from a page or url?

[jo8jo]

Originally Posted by sub_ubi

Awesome mod we love it.

Just one problem with VB CMS on our home page its interfering with our slider vFCoders - Featured Content Slider Widget (was not able to change images/articles.

Is there an easy way to exclude/disable it from a page or url?

Same problem here ..

[panosha]

Originally Posted by sub_ubi

Awesome mod we love it.

Just one problem with VB CMS on our home page its interfering with our slider vFCoders - Featured Content Slider Widget (was not able to change images/articles.

Is there an easy way to exclude/disable it from a page or url?

+1

Thanks.

[BlueCheri]

Great, works fine

G!