我的脚本不适用于Mozilla Firefox,但适用于Chrome

时间:2017-04-24 20:45:34

标签: javascript google-chrome firefox frontend

我在JS中编写了一个简单的“返回顶部”按钮。当我向下滚动150px时,它显示在页面的右下角,当我点击此按钮时,它会将我带回到页面顶部。

这可以在Google Chrome上正常使用,但在Mozilla Firefox上却没有。

我对另一个从用户输入生成随机数的脚本也有类似的问题。

first script on codepen:

(function(){

  function createButton() {

    var button = document.createElement("button");


    button.classList.add("backToTop", "hiddenBack");
    button.textContent = "back";
    document.body.appendChild(button);

    return button;
  }
  var button = createButton();

  function animatedScroll(){
    if(window.pageYOffset > 0){
      window.scrollBy(0, -5);
      setTimeout(animatedScroll, 10);
    }

  };

  button.addEventListener("click", function(e) {
      e.stopPropagation();
      animatedScroll();

   },false);

  window.addEventListener("scroll", function(e){

    if( window.pageYOffset >= 150){
      button.classList.remove("hiddenBack");
    }else {
      button.classList.add("hiddenBack");
    }

  },false);


})();

second script on codepen:

var btn = document.querySelector("#getNumbers"),
    output = document.querySelector("#showNumbers");

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function showRandomNumber(){

  var numbers = [];
  var random,
  from = document.querySelector("#from").value,
  to = document.querySelector("#to").value,
  how = document.querySelector("#how").value;

  for(var i = 0; i < how; i++){

    random = getRandom(from,to);

    while(numbers.indexOf(random) !== -1){
      random = getRandom(from,to);
    }

  numbers.push(random)
  }

  output.value = numbers.join(", ");

}

btn.onclick = showRandomNumber;

1 个答案:

答案 0 :(得分:1)

使用window.pageYOffset代替document.body.scrollTop

if(window.pageYOffset >= 150)

此处有关此问题的更多详细信息:document.body.scrollTop Firefox returns 0 : ONLY JS