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头部添加对jQuery库的引用，似乎也可以工作这样：

  <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箭头。

Javascript - 检查用户是否移动后隐藏事件将无法正常工作

1 个答案: