Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5

[Tutorial] Jquery back to top image tut

#1
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.

[Image: attachment.php?aid=3]

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
Reply


Messages In This Thread
Jquery back to top image tut - by Damian B. - August 19th, 2013 at 10:06 PM
RE: Jquery back to top image tut - by Darth-Apple - August 19th, 2013 at 10:32 PM
RE: Jquery back to top image tut - by romavia - August 21st, 2013 at 8:57 AM



Users browsing this thread: 1 Guest(s)

Dark/Light Theme Selector

Contact Us | Makestation | Return to Top | Lite (Archive) Mode | RSS Syndication 
Proudly powered by MyBB 1.8, © 2002-2024
Forum design by Makestation Team © 2013-2024