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

[xixxon]

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:35p x;right:10px;cursor:pointer;display:none;color:#ff f;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{$('#b ttop').fadeOut();}});$('#bttop').click(function(){ $('body,html').animate({scrollTop:0},800);});});</script>

Done. :up:
Hope you like it ! :D

[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]

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 :D

[zascok]

Hehe, whatever u want :D

I though so :) so here is what I have done :rolleyes:

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{$('#b ttop').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]

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]

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!

[xixxon]

Great, works fine

G!

5 stars if u like it :p

[Kraxell]

Its the same like this:
https://vborg.vbsupport.ru/showthread.php?t=243771

[zascok]

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?

I don't really know what is the CMS variable as I have no suit. But if you can find it or hopefully someone will tell us just put it instead of calendar in the following

<vb:if condition="THIS_SCRIPT != 'calendar'">
The rest of the code for footer goes here
</vb:if>

[sub_ubi]

Its vbcms

[zascok]

Its vbcms

Then copy and paste this


<vb:if condition="THIS_SCRIPT != 'vbcms'">
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35p x;right:10px;cursor:pointer;display:none;color:#ff f;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{$('#b ttop').fadeOut();}});$('#bttop').click(function(){ $('body,html').animate({scrollTop:0},800);});});</script>
</vb:if>

[xixxon]

Then copy and paste this


<vb:if condition="THIS_SCRIPT != 'vbcms'">
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35p x;right:10px;cursor:pointer;display:none;color:#ff f;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{$('#b ttop').fadeOut();}});$('#bttop').click(function(){ $('body,html').animate({scrollTop:0},800);});});</script>
</vb:if>

Thanks for supporting :up: :D

[zascok]

Thanks for supporting :up: :D

you are welcome. My turn to ask for a help. There is a small but annoying issue with the button.

When one opens the page at first the button is there, how to make it dissapear and appear only if one scrolled down a little. The very first time.

You see I gotta stop doing this. I mean asking then thinking lol

$('#bttop').hide()

[CrossWind]

hi

Please tell me how to make it work with VB3

thanks

[xixxon]

you are welcome. My turn to ask for a help. There is a small but annoying issue with the button.

When one opens the page at first the button is there, how to make it dissapear and appear only if one scrolled down a little. The very first time.

You see I gotta stop doing this. I mean asking then thinking lol

$('#bttop').hide()

I will do it in the next update :D

hi

Please tell me how to make it work with VB3

thanks

I don't use vBB3, so I can't test this :(
So sorry, anyone help him plz :o

[Arrogant-One]

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

Would be better it if was more instantaneous. All it seems to do is scroll up to the top, not get you there ASAP!

[zascok]

use this for asap

{scrollTop:0},100)

[Arrogant-One]

Is it possible to amend a posters post options:

Edit Post Reply Reply With Quote

And simply add the Top word here, so that if someone clicks it, it brings them to the top of the thread?

Edit Post Reply Reply With Quote Top

[xixxon]

Is it possible to amend a posters post options:

Edit Post Reply Reply With Quote

And simply add the Top word here, so that if someone clicks it, it brings them to the top of the thread?

Edit Post Reply Reply With Quote Top

https://vborg.vbsupport.ru/showthread.php?t=235530&highlight=top+button
Right ? :o

[justicechick]

<i>Thanks for the easy mod.</i>

[smirkley]

Smoother than a babies bottom.

Installed.

[WoODoO]

Nice :)

[stevieb]

excellent mod - thanks.

[john7911]

Thank You

[john7911]

Thank you ;)

[hterrag]

Excellent!

[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 :D
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