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

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Miscellaneous Hacks - Create "Back to top" button using jQuery in one step. (https://vborg.vbsupport.ru/showthread.php?t=286106)

xixxon

07-29-2012 10:00 PM

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

1 Attachment(s)

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

Instruction:
Find template footer.

Insert at the end.

Code:

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

davut_c20

07-31-2012 01:33 AM

Great. Thank You ;)

zascok

07-31-2012 09:56 AM

nice one. If I may add

Code:

{vb:rawphrase top}

instead of BACK TO TOP in

Code:

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

xixxon

07-31-2012 11:02 AM

Quote:

Originally Posted by zascok (Post 2353005)

nice one. If I may add

Code:

{vb:rawphrase top}

instead of BACK TO TOP in

Code:

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

Hehe, whatever u want :D

zascok

07-31-2012 12:20 PM

Quote:

Originally Posted by xixxon (Post 2353016)

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

Code:

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

then I put this into additional.css

Code:

#bttop{

padding:5px;

position:fixed;

bottom:55px;

right:10px;

cursor:pointer;

}

Wait for it....

in the footer on the very end as you said

Code:

<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

07-31-2012 05:00 PM

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

08-01-2012 02:51 AM

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

08-02-2012 07:00 AM

Quote:

Originally Posted by sub_ubi (Post 2353216)

Same problem here ..

panosha

08-02-2012 10:58 AM

Quote:

Originally Posted by sub_ubi (Post 2353216)

+1

Thanks.

BlueCheri

08-02-2012 12:21 PM

Great, works fine

G!

xixxon

08-02-2012 12:47 PM

Quote:

Originally Posted by BlueCheri (Post 2353636)

Great, works fine

G!

5 stars if u like it :p

Kraxell

08-02-2012 03:08 PM

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

zascok

08-02-2012 05:09 PM

Quote:

Originally Posted by sub_ubi (Post 2353216)

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

Code:

<vb:if condition="THIS_SCRIPT != 'calendar'">

The rest of the code for footer goes here

</vb:if>

sub_ubi

08-02-2012 10:00 PM

Its vbcms

zascok

08-04-2012 12:40 PM

Quote:

Originally Posted by sub_ubi (Post 2353832)

Its vbcms

Then copy and paste this

Code:

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

</vb:if>

xixxon

08-04-2012 01:57 PM

Quote:

Originally Posted by zascok (Post 2354352)

Then copy and paste this

Code:

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

</vb:if>

Thanks for supporting :up: :D

zascok

08-04-2012 04:01 PM

Quote:

Originally Posted by xixxon (Post 2354378)

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

08-05-2012 12:37 AM

hi

Please tell me how to make it work with VB3

thanks

xixxon

08-05-2012 01:25 AM

Quote:

Originally Posted by zascok (Post 2354424)

I will do it in the next update :D

Quote:

Originally Posted by CrossWind (Post 2354542)

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

08-08-2012 09:17 PM

Quote:

Originally Posted by CrossWind (Post 2353094)

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

08-09-2012 09:24 AM

use this for asap

{scrollTop:0},100)

Arrogant-One

08-14-2012 12:40 AM

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

08-27-2012 11:37 AM

Quote:

Originally Posted by Arrogant-One (Post 2356772)

https://vborg.vbsupport.ru/showthrea...ght=top+button
Right ? :o

justicechick

12-12-2012 01:37 PM

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

smirkley

12-13-2012 01:17 PM

Smoother than a babies bottom.

Installed.

WoODoO

01-15-2013 01:34 PM

Nice :)

stevieb

02-23-2014 05:52 PM

excellent mod - thanks.

john7911

02-24-2014 05:12 PM

Thank You

john7911

02-28-2014 04:15 PM

Thank you ;)

hterrag

05-18-2014 10:35 AM

Excellent!

betadoor

05-18-2014 11:32 PM

thanks

DemOnstar

05-19-2014 05:14 AM

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

AURFSCAN

05-19-2014 07:07 AM

1 Attachment(s)

I use

Code:

<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

05-19-2014 03:52 PM

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

06-08-2014 11:37 PM

1 Attachment(s)

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

Code:

#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

12-30-2019 03:37 PM

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

04-13-2023 05:36 PM

dont work with 4.2.6. php 7.2

All times are GMT. The time now is 09:11 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01321 seconds Memory Usage 1,821KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (13)bbcode_code_printable (13)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (37)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: