+- Makestation (https://makestation.net)
+-- Forum: Technical Arts (https://makestation.net/forumdisplay.php?fid=45)
+--- Forum: Web Design & Internet (https://makestation.net/forumdisplay.php?fid=62)
+---- Forum: Resources & Tutorials (https://makestation.net/forumdisplay.php?fid=56)
+---- Thread: [Tutorial] Jquery back to top image tut (/showthread.php?tid=396)
Jquery back to top image tut - Damian B. - August 19th, 2013
Introduction
So do you want on your theme what we got here?
A back to top button that appears when you scrolled down and disappears when you scrolled up?
This tutorial is made specifically for MyBB and not any other platform. But if anyone requests it I can try to make one for another platform to.
Lets get Started
Log in to your admin Cp < Templates and Styles < Templates < Your theme templates < Ungrouped Templates < headerinclude
Find:
Code:
{$newpmmsg}Add After:
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
$("#totop").hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#totop').fadeIn(200);
} else {
$('#totop').fadeOut(200);
}
});
$('.ontop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>Go to: Templates and Styles < Templates < Your theme templates < Footer Templates < footer
Find:
Code:
<div id="copyright">Add After:
Code:
<div id="totop" style="display: none;">
<a href="#top" class="ontop"><img src="{$theme['imgdir']}/top.gif"></a>
</div>Go to: Templates and Styles < Themes < Your theme < Global.css
Add at the bottom:
Code:
#totop {
  bottom: 150px;
  display: none;
  position: fixed;
  right: 1.5%;
  z-index: 1000;
}Notes
It could be you already got this present in your headerinclude:
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>If that is the case then remove it out of the code first given in this tutorial.
Upload
The following image to your theme folder. Or use any other to top image if you want. Preferably 32x32 or smaller.
CSS Button
If there is a demand I can make a tutorial on how to use no image but just all css.
Originally posted: http://promotionzone.net/thread-307.html
RE: Jquery back to top image tut - Darth-Apple - August 19th, 2013
Thanks for sharing. I'll have to add the improved "back to top" image here at Makestation sometime.
RE: Jquery back to top image tut - romavia - August 21st, 2013
Have no idea, I didn’t even hear it before, actually I am a student of law and do not deals with this kind of stuff.