堆栈内存溢出
  简体   繁体   English

响应式滚动顶部按钮

[英]Responsive Scroll on top Button

 原文  2018-01-03 03:04:19  2   2    javascript/ html/ css/ html5/ css3

问题描述

I trying to create a scroll on top button. 我试图在顶部按钮上创建滚动。 Its working as intended. 它按预期工作。 However, when i resize the browser screen its keep shifting its place. 但是，当我调整浏览器屏幕的大小时，其位置会不断变化。 Following is my CSS code: 以下是我的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;
    }
}

Here is the Javascript code which i am using for the functionality of the button: 这是我用于按钮功能的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
    }

问题区域屏幕截图

2 个解决方案

解决方案1
 0  2018-01-03 03:10:46

You can use media queries to change the css of the button based on the screen size. 您可以使用媒体查询根据屏幕大小更改按钮的CSS。

You can learn more about it from here. 您可以从此处了解更多信息。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/css/css_rwd_mediaqueries.asp

解决方案2
 0  2018-01-03 03:21:35

From what I see here, you should not have a problem at all. 从我这里看到的情况来看，您根本不会有问题。 The position is fixed. 该位置是固定的。 Regardless the browser resize, #myBtn will remain where it is. 无论浏览器如何调整大小，＃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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 实施“滚动到顶部”按钮 - Implementing “scroll to top” button 滚动到jQuery中的顶部按钮 - scroll to top button in jquery 滚动到顶部按钮不显示 - Scroll to the top button not showing 滚动到顶部按钮 - Scroll to top button 后退按钮导致滚动到顶部 - back button causing scroll to top 按钮的onClick，将元素滚动到顶部 - onClick of Button, Scroll the element to top Javascript按钮滚动顶部并打印 - Javascript button scroll top and print 滚动到所选手风琴按钮的顶部 - Scroll to the top of a selected accordion button “滚动到顶部按钮”的一些问题 - Some issues with a 'scroll to top button' 滚动到顶部/底部按钮错误 - Scroll to top/bottom button error
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM