响应滚动顶部按钮

时间：2018-01-03 03:04:19

标签： javascript html css html5 css3

我尝试在顶部按钮上创建滚动。它按预期工作。但是，当我调整浏览器屏幕的大小时，它会继续改变它的位置。以下是我的CSS代码：

#myBtn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 27px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: $primary-color;
    cursor: pointer; 
    padding: 10px; 
    border-radius: 10px; 
    &:hover {
      opacity: 0.8;
    }
}

以下是我用于按钮功能的Javascript代码：

// When user scrolls down 920px from the top of the document, show the button
    window.onscroll = function() {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 920 || document.documentElement.scrollTop > 920) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }

Problem area screen shot

2 个答案:

答案 0 :(得分：0)

您可以使用媒体查询根据屏幕大小更改按钮的CSS。

您可以从这里了解更多信息。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

答案 1 :(得分：0)

从我在这里看到的，你根本不应该有任何问题。这个职位是固定的。无论浏览器调整大小，＃myBtn都将保持原样。

// When user scrolls down 920px from the top of the document, show the button
  
  window.onscroll = function() {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 920 || document.documentElement.scrollTop > 920) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }
#myBtn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 27px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: red;
    cursor: pointer; 
    padding: 10px; 
    border-radius: 10px; 
    &:hover {
      opacity: 0.8;
    }
    
}
<body>
<div id="myBtn"></div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div><div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div><div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div><div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div><div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div><div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div><div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div><div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
</body>

相关问题
最新问题