The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Back To Top Button/Link

View previous topic View next topic Go down

Should there be a "back to top" button or link on the toolbar and/or footer?

67% 67% 
[ 4 ]
33% 33% 
[ 2 ]
 
Total Votes : 6

Back To Top Button/Link

Post by Cman on June 30th 2013, 7:37 pm

I would love a button or link on the toolbar and footer that scrolls to the top of the page once clicked.  It is really annoying to have to scroll to the top of the page on threads with many posts per page.

Cman
Forumember

Male Posts : 681
Reputation : 5
Language : English
Location : Florida

http://firealarmsrme.org/

Back to top Go down

Re: Back To Top Button/Link

Post by luiz187 on June 30th 2013, 8:03 pm

By your suggestion would it be optional and have to be activated by admin or no option at all, you just have to stickwith it?

luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

Re: Back To Top Button/Link

Post by Cman on June 30th 2013, 8:04 pm

I was thinking by option for the toolbar, permanent for the footer. That aspect is up to Forumotion.

Cman
Forumember

Male Posts : 681
Reputation : 5
Language : English
Location : Florida

http://firealarmsrme.org/

Back to top Go down

Re: Back To Top Button/Link

Post by luiz187 on June 30th 2013, 8:05 pm

I'll vote yes anyway

luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

Re: Back To Top Button/Link

Post by Cesar on June 30th 2013, 8:36 pm

Something like IPB forums . I voted yes.

Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Re: Back To Top Button/Link

Post by levy on June 30th 2013, 8:58 pm

My vote is NO because you can do that with jQuery

Add that in your Generalities :

Code:
<p id="back-top">
      <a href="#top"><span></span>Back to Top</a>
   </p>

That in your CSS

Code:
#back-top {
   position: fixed;
   bottom: 30px;
   margin-left: -150px;
}

#back-top a {
   width: 108px;
   display: block;
   text-align: center;
   font: 11px/100% Arial, Helvetica, sans-serif;
   text-transform: uppercase;
   text-decoration: none;
   color: #bbb;

   /* transition */
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
}
#back-top a:hover {
   color: #000;
}

/* arrow icon (span tag) */
#back-top span {
   width: 108px;
   height: 108px;
   display: block;
   margin-bottom: 7px;
   background: #ddd url(up-arrow.png) no-repeat center center;

   /* rounded corners */
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;

   /* transition */
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
}
#back-top a:hover span {
   background-color: #777;
}

Create a new javascript and fill with that :
Code:
$(document).ready(function(){

   // hide #back-top first
   $("#back-top").hide();
   
   // fade in #back-top
   $(function () {
      $(window).scroll(function () {
         if ($(this).scrollTop() > 100) {
            $('#back-top').fadeIn();
         } else {
            $('#back-top').fadeOut();
         }
      });

      // scroll body to 0px on click
      $('#back-top a').click(function () {
         $('body,html').animate({
            scrollTop: 0
         }, 800);
         return false;
      });
   });

});

Mark in all pages , and it's done Smile

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Re: Back To Top Button/Link

Post by luiz187 on June 30th 2013, 9:55 pm

That's hard though.....

luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

Re: Back To Top Button/Link

Post by Derri on July 1st 2013, 12:39 am

You can do this easily with adding code and in some themes its pre built in.


Forum Rules : : Forumotion Staff : : Appeal A Warning : : FAQ : : Tips & Tricks : : Forgotten Password/Login Issues
You need one post to send a PM
When your topic has been solved, ensure you mark the topic solved
Never post your email in public


Derri
Administrator
Administrator

Male Posts : 8385
Reputation : 576
Language : English & Basic French
Location : Scotland, United Kingdom

Back to top Go down

Re: Back To Top Button/Link

Post by Cman on July 1st 2013, 1:18 am

I have just remembered that there are "to the top" buttons on each post.

This, along with the code, makes this poll useless.

A moderator can send this poll to the denied suggestions forum, or leave it here, it is up to the moderator.

Cman
Forumember

Male Posts : 681
Reputation : 5
Language : English
Location : Florida

http://firealarmsrme.org/

Back to top Go down

Re: Back To Top Button/Link

Post by Sir. Mayo on July 6th 2013, 11:33 pm

candy_fear wrote:My vote is NO because you can do that with jQuery

Add that in your Generalities :

Code:
<p id="back-top">
 <a href="#top"><span></span>Back to Top</a>
 </p>

That in your CSS

Code:
#back-top {
 position: fixed;
 bottom: 30px;
 margin-left: -150px;
}

#back-top a {
 width: 108px;
 display: block;
 text-align: center;
 font: 11px/100% Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 text-decoration: none;
 color: #bbb;

 /* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover {
 color: #000;
}

/* arrow icon (span tag) */
#back-top span {
 width: 108px;
 height: 108px;
 display: block;
 margin-bottom: 7px;
 background: #ddd url(up-arrow.png) no-repeat center center;

 /* rounded corners */
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;

 /* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover span {
 background-color: #777;
}

Create a new javascript and fill with that :
Code:
$(document).ready(function(){

 // hide #back-top first
 $("#back-top").hide();
 
// fade in #back-top
 $(function () {
 $(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 $('#back-top').fadeIn();
 } else {
 $('#back-top').fadeOut();
 }
 });

 // scroll body to 0px on click
 $('#back-top a').click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 800);
 return false;
 });
 });

});

Mark in all pages , and it's done Smile
Yes this works like candy_fear has stated its great, now one question candy fear its displayed on the left side can i get to be on the right hand side?

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Re: Back To Top Button/Link

Post by Jophy on April 1st 2014, 7:44 am

Suggestion Clean up (1/4/2014)

-> Old suggestions(Please feel to create a new thread for the garbaged old suggestions)
-> Implemented suggestions
-> Suggestions which are currently suggested (Please use the SEARCH function)
-> Suggestions which are already possible
-> Unclear Suggestions

=> Please read the guidelines for the suggestion section: http://help.forumotion.com/t93899-suggestions-for-your-forums-how-to
=> Please take a look on the frequently suggested features for your forums:
http://help.forumotion.com/t79095-frequently-requested-suggestions-for-your-forums

Locked & Garbaged

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum