Back To Top Button/Link
+3
Cesar
luiz187
Cman
7 posters
Page 1 of 1
Should there be a "back to top" button or link on the toolbar and/or footer?
Back To Top Button/Link
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.
Re: Back To Top Button/Link
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?
Re: Back To Top Button/Link
I was thinking by option for the toolbar, permanent for the footer. That aspect is up to Forumotion.
Re: Back To Top Button/Link
My vote is NO because you can do that with jQuery
Add that in your Generalities :
That in your CSS
Create a new javascript and fill with that :
Mark in all pages , and it's done
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
Re: Back To Top Button/Link
You can do this easily with adding code and in some themes its pre built in.
Derri- Helper
- Posts : 8755
Reputation : 638
Language : English & Basic French
Location : Scotland, United Kingdom
Re: Back To Top Button/Link
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.
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.
Re: Back To Top Button/Link
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?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
Re: Back To Top Button/Link
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: https://help.forumotion.com/t93899-suggestions-for-your-forums-how-to => Please take a look on the frequently suggested features for your forums: https://help.forumotion.com/t79095-frequently-requested-suggestions-for-your-forums Locked & Garbaged |
Jophy- ForumGuru
- Posts : 17924
Reputation : 836
Language : English
Location : Somewhere
Similar topics
» (REQUEST)Link Back to us button
» how do I insert a link back to my website
» Footer Link is Back !
» link back to your website
» how to add link back to us under the page?
» how do I insert a link back to my website
» Footer Link is Back !
» link back to your website
» how to add link back to us under the page?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum