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 !

[betadoor]

thanks

[DemOnstar]

This is good to play around with. Works as it should.

[AURFSCAN]

I use

<a href="{vb:raw relpath}#top" onclick="document.location.hash='top'; return false;"><font color="maroon"><b>{vb:rawphrase top}</b></font></a>

put it wherever you want, easy to replace the phrase with an image aswell


btw, without trying this one by xixxon what is it meant to do? scroll slowly or something??

[DemOnstar]

It does scroll slowly but I guess that can be changed.

I just like the effort the guy made and shared with all and sundry.

I am now using it with opacity and border radius. Looks ok and behaves well.

Cheers xixxon. I wish I could could be as inventive as you are.

I like this idea too but can't seem to get it visible. AURFSCAN
https://vborg.vbsupport.ru/showthread.php?t=311269

[AURFSCAN]

Ok.. I like it, thx xixxon

I use existing stylevars to match forum style

add div code to footer but add css code to additional.css

border - forumhead border color and width
background - forumhead background color
hover background - footer background color or could be #color to suit eg. shades darker
padding - whatever looks good
border radius - browser compliant

#bttop {border:{vb:stylevar forumhead_border}; background:{vb:stylevar forumhead_background};
 text-align:center; padding:3px 9px 4px 10px; position:fixed; bottom:64px; right:0px; cursor:pointer; display:none; color:{vb:stylevar forumhead_color}; font-weight:bold; 
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;}
#bttop:hover{border:{vb:stylevar forumhead_border}; background:{vb:stylevar footer_background}}

@demon, post in thread, i'll see if I can help

[MentorBR]

I was needing this
In case I wanted to add a button that scrolls to the last post of a topic, I think it would be cool too

[oldfan]

dont work with 4.2.6. php 7.2