I've been looking this morning for an answers to my problem with getting the location of the window in IE8 to create a back to top button in IE8 with fade-in functionality.

Things that didn't work and returned zero in IE8:

window.pageYOffset 

$(window).scrollTop()

$(document).scrollTop()

$(this).scrollTop()

This is my code before my fix when it's only working for IE9+ & FF & Chrome

var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
    } else {
        jQuery('.back-to-top').fadeOut(duration);
    }
});

jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
})

And the CSS:

.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: #ebebeb;
    font-size: 12px;
    padding: 1em;
    display: none;
  }

.back-to-top:hover {  
  background-color: rgba(135, 135, 135, 0.50);
}

And here is the JSFiddle of the code that is not working: /

I've been looking this morning for an answers to my problem with getting the location of the window in IE8 to create a back to top button in IE8 with fade-in functionality.

Things that didn't work and returned zero in IE8:

window.pageYOffset 

$(window).scrollTop()

$(document).scrollTop()

$(this).scrollTop()

This is my code before my fix when it's only working for IE9+ & FF & Chrome

var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
    } else {
        jQuery('.back-to-top').fadeOut(duration);
    }
});

jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
})

And the CSS:

.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: #ebebeb;
    font-size: 12px;
    padding: 1em;
    display: none;
  }

.back-to-top:hover {  
  background-color: rgba(135, 135, 135, 0.50);
}

And here is the JSFiddle of the code that is not working: http://jsfiddle/VWOU/uG5mH/1/

• javascript
• jquery
• html
• css
• internet-explorer-8

Share Follow asked Mar 8, 2014 at 7:26 FastSolutionsFastSolutions 1,82911 gold badge2727 silver badges5252 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The fix I've found was located here http://forums.asp/t/1618316.aspx

And it transforms my code to this (also cleaned up a little bit)

var offset = 220;
var duration = 500;
$(window).scroll(function() {
    if (document.documentElement.scrollTop || jQuery(this).scrollTop() > offset) {
        $('.back-to-top').fadeIn(duration);
    } else {
        $('.back-to-top').fadeOut(duration);
    }
});

$('.back-to-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, duration);
    return false;
})

And here is a working JSFiddle: http://jsfiddle/VWOU/uG5mH/3/