Question

js有很大的问题＆amp;非常糟糕。

为什么这段代码工作不好？

（这是回到顶部的btn）

＆＃13;

function checkScrollTop(){
  if (document.body.scrollTop > 300) {
    document.getElementById("backToTop").style.display = "block";
    setTimeout(function () {
      document.getElementById("backToTop").style.opacity = 1;
    }, 1);
  }else {
    document.getElementById("backToTop").style.opacity = "";
    setTimeout(function () {
      document.getElementById("backToTop").style.display = "";
    }, 300);
  }
}
function backToTop(){
  var x = setInterval(function () {
    if (document.body.scrollTop != 0) {
      document.body.scrollTop -=20;
    }else {
      clearInterval(x);
    }
  }, 1);
}

＆＃13;

#backToTop{
  display: none;
  opacity: 0;
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: 0.3s;
  cursor: pointer;
  background-color: #098774;
  color: white;
  text-align: center;
  font-size: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

＆＃13;

  <html>

<body onscroll="checkScrollTop();">
    <div id="backToTop" onclick="backToTop();">^</div>
  <div style="width: 300px;">
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER</div>
</body>
  <html>

＆＃13;

查看以下视频

[url = http://vip.opload.ir/vipdl/95/10/hamidr.bk/avc-Video-1-18-2017-7-11-11-PM.mp4] http://vip.opload.ir/vipdl/95/10/hamidr.bk/avc-Video-1-18-2017-7-11-11-PM.mp4 [/ url]

Answer 1

好完全改写：

opacity=0;
window.onload=function(){
setInterval(function(){
   var el=document.getElementById("backToTop");
  if(el.style.opacity>opacity){
    el.style.opacity-=0.1;
  }else if(el.style.opacity<opacity){
    el.style.opacity+=0.1;
  }
  if(el.style.opacity>0){
    el.style.display="block";
  }else{
    el.style.display="none";
  }
  },100);
  };

现在你可以简单地做opacity = 1;在你的代码中，它将平滑过渡而不会闪烁。

Answer 2

可见性代替显示！

修改后的代码：

＆＃13;

function checkScrollTop(){
  if (document.body.scrollTop > 500) {
    document.getElementById("backToTop").style.cursor = "";
    sdocument.getElementById("backToTop").style.visibility = "visible";
    setTimeout(function () {
      document.getElementById("backToTop").style.opacity = 1;
    }, 1);
  }else if (selector("#backToTop").style.visibility == "visible") {
    document.getElementById("backToTop").style.opacity = "";
    document.getElementById("backToTop").style.cursor = "default";
    setTimeout(function () {
      document.getElementById("backToTop").style.visibility = "";
    }, 300);
  }
}

＆＃13;

#backToTop{
  visibility: hidden;
}

＆＃13;

js更改样式DOM元素 - 为什么这段代码工作不好？

2 个答案: