Back To Top Button on Forums

[MrMackeyMKayyy]

Hello, I was curious if this was a feature in the default theme of IP Board as I have yet to come across it. My community is growing and the content being posted is as well so I have been looking for a back to top button that shows at the bottom of the forum to direct users well, back to the top  Would love a helping hand on this feature, thank you.

 

*Edit: I am on the latest version of IP Board

[opentype]

It’s now available as plugin:

[MrMackeyMKayyy]

It’s now available as plugin:

​Thank you very much for the response! Is there a way to change it to where it does not have that bouncing effect once it hits the top of the page? That is very off putting to me as I am just looking for a basic button.

[不中用]

​Thank you very much for the response! Is there a way to change it to where it does not have that bouncing effect once it hits the top of the page? That is very off putting to me as I am just looking for a basic button.

​.

You can add one yourself in the template ..

Customization > theme > Edit HTML & CSS > Templates > globalTemplate (default the way it opens)

1. Find "elFooterNavigation" .. under this <div> you add a new line .. copy& paste this code :

 

<a _title="Go To TOP" href="#top" id="elTOP" class="ipsPos_right ipsType_large" data-ipstooltip="Go To Top" data-ipsmenu=""><i class="fa fa-chevron-up"></i></a>

 

2. Find "{template="includeJS" .. " .. under this line add a new line .. copy&paste this code :

 

<script>$(document).ready(function(){ $("a[href='#top']").click(function(){ $("html, body").animate({ scrollTop: 0 }, "slow"); return false;});});</script>

 

3. CSS .. not needed, but it will bump to RSS icon if you have it enabled .. into your "custom.css" .. add this:

 

#elTOP {margin-left: 15px;}

 

that's it 

little info: The "html, body" (in jQuery) is used for browser compatibility. Chrome scrolls with "body" & IE with "html" ..

 

 

 

 

.

[MrMackeyMKayyy]

​.

You can add one yourself in the template ..

Customization > theme > Edit HTML & CSS > Templates > globalTemplate (default the way it opens)

1. Find "elFooterNavigation" .. under this <div> you add a new line .. copy& paste this code :

 

<a _title="Go To TOP" href="#top" id="elTOP" class="ipsPos_right ipsType_large" data-ipstooltip="Go To Top" data-ipsmenu=""><i class="fa fa-chevron-up"></i></a>

 

2. Find "{template="includeJS" .. " .. under this line add a new line .. copy&paste this code :

 

<script>$(document).ready(function(){ $("a[href='#top']").click(function(){ $("html, body").animate({ scrollTop: 0 }, "slow"); return false;});});</script>

 

3. CSS .. not needed, but it will bump to RSS icon if you have it enabled .. into your "custom.css" .. add this:

 

#elTOP {margin-left: 15px;}

 

that's it 

little info: The "html, body" (in jQuery) is used for browser compatibility. Chrome scrolls with "body" & IE with "html" ..

 

 

 

 

.

​That's much appreciated! I lack coding experience to handle this myself without a nice guide like this