Question

我有一个从上到下的按钮，当用户在网站上向下滚动时会出现，但是，如果此按钮仅根据屏幕大小显示，我希望它。

作为javascript新手，我无法确定如何添加它，除了我认为它应该是“ if”参数的一部分。

HTML：

<button onclick="topFunction()" id="button-top" title="Go to top">Top</button>

CSS代码：

        #button-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none; 
    outline: none;
    background-color: #d46900;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 1.5em;
}

#button-top:hover {
    color: #1c1c1c;
    background-color: #ccc;
}

JS代码：

/* BACK TO TOP BUTTON*/
// When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("button-top").style.display = "block";
    } else {
        document.getElementById("button-top").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
}

Answer 1

您应该使用媒体查询来显示或隐藏按钮，具体取决于屏幕尺寸：

var txt = TextBoxBuilder.With().Id("textBox1").Text("Hello!").Build();

/* Hide the button if the width is less than 500px */
@media (max-width: 500px) {
  #button-top {
    display: none;
  }
}

您可以在上方运行代码段并调整浏览器的大小，一旦宽度低于500px，该按钮就会消失。

Answer 2

不确定您想要什么。如果您希望顶部按钮出现在桌面等较大的屏幕上，而消失在平板电脑或移动设备等较小的屏幕上，则可以执行以下操作：

@media only screen and (max-width: 768px) {
    #button-top {
        display: none;
    }
}

但是，如果您希望您的按钮顶部按钮在滚动后出现，而在滚动回到顶部之后消失，您可以执行以下操作：

css：

#button-top.show {
    visibility: visible;
}

js：

$(document).on("scroll", function () {
    if ($(window).scrollTop() > 100) {
        $("#button-top").addClass("show");
    } else {
        $("#button-top").removeClass("show");
    }
});

如何仅运行根据屏幕大小生成“返回顶部”按钮的功能？

2 个答案: