IE8中的ScrollTop返回0 [英] ScrollTop in IE8 returning 0

问题描述

$ b我今天早上一直在寻找解决IE8窗口位置问题的答案，以便在IE8中创建一个带淡入功能的返回顶部按钮。

$ b

在IE8中无法正常工作并返回零的情况：

  window.pageYOffset 
 
 $（window）.scrollTop（）
 
 $（document）.scrollTop（）
 $ b $（this）.scrollTop（）
  

这是我修复之前的代码，仅适用于IE9 +& FF& Chrome

  var offset = 220; 
 var duration = 500; 
（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）; 
返回false; 
}）
  

和CSS：

  .back-to-top {
 position：fixed; 
底部：2em; 
 right：0px; 
 text-decoration：none; 
颜色：＃000000; 
背景颜色：#ebebeb; 
 font-size：12px; 
填充：1em; 
 display：none; 
} 
 
 .back-to-top：hover {
 background-color：rgba（135，135，135，0.50）; 
} 
  

以下是不工作的代码的JSFiddle：
http://jsfiddle.net/VWOU/uG5mH/1/

解决方案

我找到的修复程序位于 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 fadeIn（duration）; 
} else {
 $（'。back-to-top'）。fadeOut（duration）; 
} 
} ）;点击（功能（事件）{
 event.preventDefault（）; 
 $（'html，body'））。
 
 $（'。back-to-top' animate（{scrollTop：0}，duration）; 
返回false; 
}）
  

这里有一个可用的JSFiddle：
http://jsfiddle.net/VWOU/uG5mH/3/

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.net/VWOU/uG5mH/1/

解决方案

The fix I've found was located here http://forums.asp.net/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.net/VWOU/uG5mH/3/

这篇关于IE8中的ScrollTop返回0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！