IE8中的ScrollTop返回0

时间:2014-03-08 07:26:43

标签: javascript jquery html css internet-explorer-8

我今天早上一直在寻找我的问题的答案,在IE8中获取窗口的位置,在IE8中创建一个具有淡入功能的返回顶部按钮。

在IE8中没有工作并返回零的事情:

window.pageYOffset 

$(window).scrollTop()

$(document).scrollTop()

$(this).scrollTop()

这是我修复之前的代码,因为它仅用于IE9 +& FF&铬

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;
})

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);
}

这是代码的JSFiddle无法正常工作: http://jsfiddle.net/VWOU/uG5mH/1/

1 个答案:

答案 0 :(得分:6)

我发现的修复程序位于http://forums.asp.net/t/1618316.aspx

它将我的代码转换为此(也清理了一点)

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;
})

这是一个有效的JSFiddle: http://jsfiddle.net/VWOU/uG5mH/3/