Jquery go to top not wanting to work.

[TwitchisMental]

So I am trying to make a simple go to top button slowly slides to the top when click.(Hence why I am using jquery lol)


I have tried a few different ways to do this and for some reason no matter what the animation never happens. It just instantly goes to the top.


Here is the code itself -

Code Select Expand



<script type="text/javascript">
   $.noConflict();
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$("#top").fadeIn();
} else {
$("#top").fadeOut();
}
});

$("#top").click(function() {
$("body,html").animate({scrollTop:0},800);
});
});
</script>

[travisbwy]

Have you tried a variation like this:

Code Select Expand

$('#top').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

[Bugo]

Try this:

Code Select Expand


<script type="text/javascript">window.jQuery || document.write(unescape(\'%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"%3E%3C/script%3E\'))</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$("#top").fadeIn();
} else {
$("#top").fadeOut();
}
});

$("#top").click(function() {
$("body,html").animate({scrollTop:0},800);
});
});
</script>


[TwitchisMental]

I have tried both of your suggestions and still no good. I will attach the index.template.php to see if someone can spot whats wrong.


I am honestly stumped lol.

[mashby]

I am seeing this in there:
$.noConflict();
Not entirely sure you need that in there. Maybe yank that out and see if it works?
http://api.jquery.com/jQuery.noConflict/

[TwitchisMental]

I am seeing this in there:
$.noConflict();
Not entirely sure you need that in there. Maybe yank that out and see if it works?
http://api.jquery.com/jQuery.noConflict/

I only put it there as a guess to the fix. I have removed it and still nothing.

[mashby]

Which theme is the index.template.php file from?

[The Craw]

Maybe something like this? No jQuery used.

Code Select Expand


<script type="text/javascript">
(function()
{
var upButton = documen.getElementById('scroll-up');
upButton.customEvent('click', function()
{
var bodyScroll = document.body. scrollHeight;
if (bodyScroll != null && bodyScroll > 1)
goUp(bodyScroll);
});
});
Object.prototype.customEvent = function(type, callback)
{
if (this.addEventListener)
this.addEventListener(type, callback)

else if (this.attachEvent)
this.attachEvent('on' + type, callback);

else
this['on' + type] = callback;
}
function goUp(bScroll)
{
if (bScroll <= 1)
return;

setInterval(function()
{
var current = document.body.scrollHeight -= 4;
goUp(current);
}, 50);
}
</script>


[TwitchisMental]

Which theme is the index.template.php file from?

A theme I am making. (Android Theme)


@The Crew that did not work either.

[The Craw]

Here's a revised version. I was in a hurry with the last one and really messed it up big time. This should work though.

Code Select Expand


<script type="text/javascript">
window.onload = function()
{
var upButton = document.getElementById('top');

upButton.customEvent('click', function(event)
{
event.preventDefault();

var bodyScroll = document.getElementsByTagName('body')[0].scrollHeight;

if (bodyScroll != null && bodyScroll > 1)
goUp(bodyScroll);
});
}
Object.prototype.customEvent = function(type, callback)
{
if (this.addEventListener)
this.addEventListener(type, callback)

else if (this.attachEvent)
this.attachEvent('on' + type, callback);

else
this['on' + type] = callback;
}
function goUp(bScroll)
{
var element = document.getElementsByTagName('body')[0];

if (bScroll <= 1)
return;

setTimeout(function()
{
var current = element.scrollTop = bScroll - 150;
goUp(current);
}, 0050);
}
</script>


[TwitchisMental]

Here's a revised version. I was in a hurry with the last one and really messed it up big time. This should work though.

Code Select Expand


      <script type="text/javascript">
      window.onload = function()
      {
         var upButton = document.getElementById('top');

         upButton.customEvent('click', function(event)
         {
            event.preventDefault();
           
            var bodyScroll = document.getElementsByTagName('body')[0].scrollHeight;

            if (bodyScroll != null && bodyScroll > 1)
               goUp(bodyScroll);
         });
      }
      Object.prototype.customEvent = function(type, callback)
      {
         if (this.addEventListener)
            this.addEventListener(type, callback)

         else if (this.attachEvent)
            this.attachEvent('on' + type, callback);

         else
            this['on' + type] = callback;
      }
      function goUp(bScroll)
      {
         var element = document.getElementsByTagName('body')[0];

         if (bScroll <= 1)
            return;

         setTimeout(function()
         {
            var current = element.scrollTop = bScroll - 150;
            goUp(current);
         }, 0050);
      }
      </script>


Sadly this does not work either.

[The Craw]

Works for me. What does your JS console say? And is the old page cached?

[TwitchisMental]

Works for me. What does your JS console say? And is the old page cached?

No I clear my cache every time I try it to be sure.


My JS console says -

Code Select Expand


Object function (type, callback) { if (this.addEventListener) this.addEventListener(type, callback) else if (this.attachEvent) this.attachEvent('on' + type, callback); else this['on' + type] = callback; } has no method 'exec' 


[The Craw]

Well that doesn't make sense. I didn't even use exec(). Does it say where that method is being called from? Maybe renaming the prototype function will fix it.

[TwitchisMental]

Well that doesn't make sense. I didn't even use exec(). Does it say where that method is being called from? Maybe renaming the prototype function will fix it.

It says it is coming from the jquery.min.js file <.<

[The Craw]

Okay, try this one then.

Code Select Expand


<script type="text/javascript">
Object.prototype.addEvent = function(type, callback)
{
if (this.addEventListener)
this.addEventListener(type, callback)

else if (this.attachEvent)
this.attachEvent('on' + type, callback);

else
this['on' + type] = callback;
}
window.addEvent('load', function()
{
var upButton = document.getElementById('top');

upButton.addEvent('click', function(event)
{
event.preventDefault();

var bodyScroll = document.getElementsByTagName('body')[0].scrollHeight;

if (bodyScroll != null && bodyScroll > 1)
goUp(bodyScroll);
});
});
function goUp(bScroll)
{
var element = document.getElementsByTagName('body')[0];

if (bScroll <= 1)
return;

setTimeout(function()
{
var current = element.scrollTop = bScroll - 150;
goUp(current);
}, 0050);
}
</script>


[The Craw]

The last revision is a little less obtrusive. Here's a JSfiddle page so you can mess with it.

http://jsfiddle.net/JQ673/

[TwitchisMental]

Well that worked after fiddling a bit with my <a> lol.


However it isn't really smooth. It is kinda laggy. IT kinda likes skips along to the top of the page. Where as the jquery I was trying to use would smoothy go to the top.


Edit: NVM... I got it to smooth out.. lol Thank you all for your help .

[The Craw]

You're welcome. I'm glad it's working now.