[jQuery] Appearing Scroll to Top

[effone]

There are huge and lengthy jQuery scroll to top scripts are available throughout the web. But today we will learn to make an appearing scroll to top button with minimal jQ and CSS.

Initially, the scroll to top button will be hidden but as soon as the user will scroll down, the button will appear.

Open your footer template and add the following code at the very beginning:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
 $("#backtop").hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 400) {
      $('#backtop').fadeIn(200);
    } else {
      $('#backtop').fadeOut(200);
    }
  });
  $('.go-top').click(function () {
    $('html,body').animate({
      scrollTop: 0
    }, 1000);
    return false;
  });
});
</script>

and at the end before two close </div> tags:

<div id='backtop'>
    <a class='go-top' href='#top' title='Back to Top'><img src="{$theme['imgdir']}/top.png" /></a>
</div>

Save your footer template. Open global.css and add at the end:

#backtop {
	position: fixed;
	bottom: 50px;
	right: 10px;
	margin: 0;
	padding: 0;
	width: 36px;
	height: 36px;
	z-index: 100;
}

Now upload this up button in your theme image directory:
   

Remember to include jQ library in MyBB if it is already not. In headerinclude:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Enjoy scrolling back to top ...

[Trickshot]

Awesome tut man.

[alv4]

God, Thanks!
I was looking for this a few months ago!

[Nwolf8]

Thanks! This will be very useful.

[godgifted]

working like a charm Thanks Man

---

Working fine. But only showing some unnatural behavioral in this page. can you tell me why?
Problem Page: http://www.indianstudentforum.com/Thread...n-Tutorial

But working perfectly on other places: http://www.indianstudentforum.com

In the problem link it is working like Default return to top link comes with mybb, no jquery support.

Please help, otherwise I have to delete it only for this page which I dont want.

[effone]

There is a function on that particular page that starts with:

<script>
$.noConflict();
var sceditor_lang = "en";
var mybb_emoticons = {"dropdown":
bla ...
bla ...
bla ...

Which is conflicting with the return to top script.

Note that you should not use jQ shorthand (that is $) in MyBB, it surely conflicts. I suggest you to start that mentioned function with:

<script type="text/javascript">
jQuery.noConflict();
var sceditor_lang = "en";
var mybb_emoticons = {"dropdown":
bla ...
bla ...
bla ...

and see what happens ...

[godgifted]

Check, Changed everything just like you told me to do, but still the same issue remains. What should I do now?

[effone]

Just check back all the other functions you've applied specifically for that page. If you can't get the wrong function remove all the specific ones and add one by one watching the result.

I have no idea what other functions you've applied on that page. Even that page is not functional in my browser properly.

But I have a doubt on your Yahoo smiley script as well as your window onload redirect (which is not using jQ) script.

[alv4]

Having problem with the editor buttons when I press for example the bold button, appear [undefined] [/undefined]

[effone]

How that problem is related to this tutorial?