0

I'm using the following script for scroll to top function,

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

    $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });

**html**
    <a href="#" class="scrollup">Scroll</a>

**css**
    .scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    left:100px;
    display:none;
    text-indent:-9999px;
    background:url('{{ 'icon_top.png' | asset_url }}') no-repeat;
}

@media only screen and (max-width: 767px) {
    .scrollup {
        display:none;
    }
}

The problem is that when i'm using this script the display:none; in my css (under @media) is not in use. i need it to hide the button in mobile devices.

The bottom script (with different css) is working fine, but i want to use the above for the fadeIn fadeOut use.

What i'm missing?

 $(window).scroll(function(){
    if(window.scrollY > 100) {
        $('.scrollup').css('bottom', -8);
    } else {
        $('.scrollup').css('bottom', -100);
    }
});
$('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
4

3 回答 3

0

尝试使用 jQuery .hide() 代替/

$('.scrollup').hide();

除了其他答案中讨论的内容外，还有一些检查移动设备的方法

1)

 if( useragent.search("iphone") )
    ; // iphone
else if( useragent.search("ipod") )
    ; // ipod
else if( useragent.search("android") )
    ; // android

2)

var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;
于 2013-03-18T19:40:15.450 回答
0

该元素是否有一个 ID#scrolltop和一个类.scrollup？对于你正在做的事情，听起来它需要 jQuery 才能找到它。

如果真正的目标是在移动设备上隐藏它，您可能希望使用媒体查询。

@media (max-width:699px) {
    #scrolltotop, .scrollup { display: none; }
}

这将在任何小于 700 像素的 Web 浏览器上隐藏该按钮。

* - 更新 - *

由于您已经在走这条路线并且它不起作用，您可能只想做一个移动浏览器检测来处理这个问题。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('.scrollup').css({display:'none'});
}

您可以在此处找到该测试的完整扩展版本：http: //detectmobilebrowsers.com/

使用这种方法，您可以隐藏此元素以及在移动设备上查看页面时不想显示在页面上的任何数量的元素。

于 2013-03-17T12:56:47.347 回答
0

我遇到了同样的问题并通过以下方式解决了它：

@media print { 
    .scrollup { 
        display: none; 
        bottom: 0; 
        right: 0; 
        width: 0px; 
        height: 0px; 
        visibility: hidden; 
    }
}
于 2017-02-13T18:06:39.317 回答