检查用户是否移动后隐藏事件将不起作用

Question

我正在向此脚本添加一个隐藏事件，这样该按钮就不会在移动设备中显示，也不会起作用。谁能告诉我为什么会这样？

<SCRIPT>
      var $ = jQuery.noConflict();
      jQuery(document).ready(function( $ ){
      scrollToTop.init( );
      });
      var scrollToTop =
      {

    init: function(  ){
//Check to see if the window is top if not then     display button
      $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
      } else {
      $('.scrollToTop').fadeOut();
      }
      });
 // Click event to scroll to top
      $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
      });

 // Check to see if window is mobile, if yes then      hide button
      $(window).on('resize', function()
      {
      if($(this).width() > 600)
      {
      $('.scrollToTop').hide();
      }
      });
// Check to see if window is mobile, if yes then      hide button

      }
      };
</SCRIPT>

这些是样式：

<STYLE>
      .scrollToTop{
      width: 100px;
      height: 130px;
      padding: 10px;
      text-align:center;
      background: whiteSmoke;
      font-weight: bold;
      color: #444;
      text-decoration: none;
      position:fixed;
      bottom: 75px;
      right: 40px;
      background: url('../_images/icons/arrow_up.png') no-repeat 0 20px;
      }
</STYLE>

这就是 html 的样子：

 <HTML>
   <BODY>
      <NAV>
      <a href='#top_of_page' class='scrollToTop' style='display: inline;'>Scroll To Top</a>
      </NAV>
  </BODY>
</HTML>

Answer 1

除其他考虑外，如果您在 init 函数结束后删除 </p>（已在您的编辑中完成）并在你的 HTML 的头，像这样：

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js</script>
  </head>

您还可以检查滚动功能，每次向下滚动页面时都会再次显示箭头，并将您的隐藏条件也放在那里：

$(window).scroll(function(){
    if (!isMobile) {
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    }
});

您还可以考虑在您的页面中加入对移动设备的更好检查，例如此处描述的其中一种：What is the best way to detect a mobile device in jQuery? 因为当页面以纵向模式加载时，您的 .scrollTop 箭头也会显示。

检查用户是否移动后隐藏事件将不起作用

Hide event after checking if user is mobile won't work

jquery

jquery-events