将语句与jquery相结合，并使用媒体查询来实现返回页首按钮

combining statements with jquery, and using media queries for a back to top button

本文关键字：查询 媒体 实现 按钮 返回页首 语句 jquery 相结合      更新时间：2023-09-26

我总是对在jQuery中编写语句感到困惑。我正试图让这个背面按钮只出现在较大的屏幕宽度上，并隐藏在手机上。

如何组合语句或正确更改代码以使其正常工作？

$(document).ready(function(){
    // Back to Top
    $("#back-top").hide(); // hide #back-top first
    // fade in after 500px down
    $(function () {
        $(window).scroll(function () {
          if ($(this).scrollTop() > 500 && screen.width >= 641) {
            $('#back-top').fadeIn();
          } else {
            $('#back-top').fadeOut();
          }
        });
        // scroll body to 0px on click
        $('#back-top').click(function () {
          $('body,html').animate({
            scrollTop: 0 }, 800); // 0px from top, 800 duration
          return false;
        });
    });
    if (screen.width < 641) {
        $("#back-top").hide();
    }
});

Css:

@media all and (max-width: 640px) {
  #back-top{ 
     display: none!important;
  }
}
相关文章：