Question

我知道这个主题已经在整个互联网上得到解决，但我仍然无法弄清楚。我正在尝试使锚标签中的导航链接在页面上平滑滚动。在台式机上可以完美地工作，但是我一生都无法弄清楚为什么不能在移动设备上使用。我试过只使用$（'body'）和只是$（'html'）而没有运气。

jQuery

$('#toTopBtn').click(function(e){
   e.preventDefault();
   $('html, body').animate({scrollTop: 0}, "slow");
})

$('.servicesLink').click(function(e){
   $('html, body').animate({scrollTop: $("#services").offset().top}, 
   "slow");
})

$('.testimonialsLink').click(function(e){
   e.preventDefault();
   $('html, body').animate({scrollTop: $("#testimonials").offset().top}, 
   "slow");
})

$('.aboutLink').click(function(e){
  e.preventDefault();
  $('html, body').animate({scrollTop: $("#about").offset().top}, "slow");
})

$('.contactLink').click(function(e){
  e.preventDefault();
  $('html, body').animate({scrollTop: $("#contact").offset().top}, "slow");
})

HTML（这是指向顶部的箭头）

<div class="toTopBtn">
<a id="toTopBtn" href="javascript:void(0)"><span class="fas fa-arrow-up"> 
</span></a>
</div>

HTML（导航链接）

<li class="nav-item my-auto">
<a class="nav-link servicesLink custom-nav-right" 
href="javascript:void(0)">SERVICES</a>
</li>

<li class="nav-item my-auto">
<a class="nav-link testimonialsLink custom-nav-right" 
href="javascript:void(0)">TESTIMONIALS</a>
</li>

<li class="nav-item my-auto">
<a class="nav-link aboutLink custom-nav-right" 
href="javascript:void(0)">ABOUT</a>
</li>

<li class="nav-item my-auto">
<a class="nav-link contactLink custom-nav-right" 
href="javascript:void(0)">CONTACT</a>
</li>

jQuery scrollTop在移动浏览器上不起作用

0 个答案: