jQuery Mobile scrollTop问题无法通过窗口或正文破解解决

时间:2018-10-05 04:29:02

标签: jquery

我正在使用代码制作页面顶部按钮Jquery动画。该动画在PC浏览器和Android上效果很好,但在iPhone或平板电脑上效果不佳。因此,我通过ifelse在Jquery中添加了移动和PC定义。

但是,问题仍未解决。我想念什么吗?

代码:

function scrollTo(to, duration, start=0) {
    if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)){
      var body=$('body');
    }
    else{
        var body=$(document.documentElement) || $(document.body) || $(document.window) ;
    }
        body.scrollTop(start);
        if (body.scrollTop() == to) return;
        var diff = to - body.scrollTop();
        var speed=1;
        var scrollStep = Math.PI / (duration/ speed);
        var count = 0, currPos,pospre;
                    console.log(!pospre);
        scrollInterval = setInterval(function(){
            if (Math.ceil(body.scrollTop()) != to) {
                count = count + 1;

                currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
                //console.log(currPos);
                body.scrollTop(currPos);
                console.log(pospre-currPos)
                if((diff*(pospre-currPos)>0) && pospre){
                  clearInterval(scrollInterval);
                  body.scrollTop(to);
                }
                pospre=currPos;
                }
            else { clearInterval(scrollInterval);}
        },10);
    }

    $(document).ready(function(){
    $("#up-btn").find("a").on("click",function(event){event.preventDefault();});

    $("#up-btn").on("click",function(event){
      event.stopPropagation();
      if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)){
      var body=$('body');
    }
    else{
        var body=$(document.documentElement) || $(document.body) || $(document.window) ;
    }
      event.preventDefault();
      scrollTo(0,100,body.scrollTop());
    }
    );

    });
#up-btn a{
  position: fixed;
  right:1%;
  bottom:40%;
  z-index: 5;
  opacity: 0.8;
  text-align: center;
  height:50px;
  width:50px;
  padding-top: 8px;
  border-radius: 25px;
  background-color:#666;
}

#up-btn img{
  display: inline-block;
  width:65%;
  height:75%;
}

p{
  margin:100px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="up-btn">
	<a href=""><i><img src="https://picsum.photos/30/30/?random" alt=""></i></a>
</div>

<p>something to scroll</p>
<p>something to scroll</p>
<p>something to scroll</p>
<p>something to scroll</p>
<p>something to scroll</p>
<p>something to scroll</p>
<p>something to scroll</p>
<p>something to scroll</p>

我也尝试过$(window).scrollTop$("html,body",parent.document).scrollTop,但似乎没有运气。

0 个答案:

没有答案