我正在使用代码制作页面顶部按钮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
,但似乎没有运气。