Question

我有一个滚动到另一个元素的按钮。这在桌面上工作正常，但在移动设备上如果我滚动一点并单击按钮，该功能不会精确滚动到我想要的元素，但有点偏离，即使我没有指定任何偏移。

在桌面上，我有一个可以改变大小的固定菜单，这就是为什么在下面的代码中我使用窗口宽度检查桌面或移动设备：

if(window.outerWidth > 991) {
    console.log('desktop');
    $("body").on("click","#bestellenbtn",function(){
        var scrollmenuheight = $('.scrollmenu').height();
        $([document.documentElement, document.body]).animate({
        scrollTop: $("#bestellen").offset().top - scrollmenuheight
    }, 1000);
    });
}else{
    console.log('mobile');
    $("body").on("click","#bestellenbtn",function(){
        $([document.documentElement, document.body]).animate({
        scrollTop: $("#bestellen").offset().top
    }, 1000);
    });
}

这是启动功能的按钮：

<a href="javascript:void(0);" id="bestellenbtn"><button class="btnstyle blue-inverse" type="button" name="button">Bestellen</button></a>

和元素：

<div class="separator" id="bestellen">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>Bestellen</h2>
      </div>
    </div>
  </div>
</div>

我在代码笔中添加了该页面的副本，以便您可以自己查看（单击移动视图上 4 个蓝色按钮中的第一个）：

https://codepen.io/twan2020/pen/RwGmaMQ 您可以调整大小以获得移动版本。

我能做什么？

我已经尝试过更改偏移量，但这应该不是必需的，因为在移动设备上没有改变文档高度的固定菜单。

我制作了一个简短的视频来展示问题所在：

https://gyazo.com/431163072afb0de9a6488ebfba895ff5

Answer 1

在处理 if-statement 点击的函数中使用 #bestellenbtn。
使用 window.innerWidth 而不是 window.outerWidth。但是，出于兼容性原因，最好使用以下代码。

var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); .

在移动设备上，使用具有流畅行为的 Element.scrollIntoView()。让 JS 规则。

Element.scrollIntoView()

<块引用>

Element 接口的 scrollIntoView() 方法滚动元素的父容器，使得 scrollIntoView() 所在的元素调用对用户可见。 MDN - Element.scrollIntoView()

document.querySelector("#bestellen")
          .scrollIntoView({block: "start", behavior: "smooth"})



$("body").on("click","#bestellenbtn",function(){
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  if(viewportWidth > 991) {
    console.log('desktop');
    var scrollmenuheight = $('.scrollmenu').height();
    $([document.documentElement, document.body]).animate({
      scrollTop: $("#bestellen").offset().top - scrollmenuheight
    }, 1000);
  }else{
    console.log('mobiel');
    document.querySelector("#bestellen")
      .scrollIntoView({block: "start", behavior: "smooth"})
  }
});

更新。

<块引用>

你知道为什么当我点击桌面时，动画不是瞬间但仅在大约 1 秒后开始？也许函数是太重了？

这可能是因为动画持续时间。尝试使用 300 或 700 作为 animate 函数的超时时间。

如果您需要与移动设备上类似的行为，请使用具有流畅行为的 window.scrollTo。

<块引用>

Window.scrollTo() 滚动到一组特定的坐标文档。 - MDN - Window.scrollTo()

$("body").on("click","#bestellenbtn",function(){
  var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  if(viewportWidth > 991) {
    console.log('desktop');
    var scrollmenuheight = $('.scrollmenu').height();
    var offsetTop = $("#bestellen").offset().top - scrollmenuheight;
    window.scrollTo({
      top: offsetTop,
      behavior: 'smooth'
    });
    
  
  }else{
    console.log('mobiel');
    document.querySelector("#bestellen")
      .scrollIntoView({block: "start", behavior: "smooth"})
  }
});

在移动设备上，它滚动得更快，因为 #bestellenbtn 和 #bestellen 之间的距离大于桌面上这两个元素之间的距离。

Answer 2

根据您的问题，我了解到您希望在单击菜单中的项目时向下滚动到页面的特定部分。这可以很容易地用 HTML 完成。在链接元素的 href 中，将 javascript:void(0); 替换为要滚动到的元素的 ID，即 #bestellen。检查我的笔 here。点击一、二、三或四后，您就会滚动到该特定部分。 >

html {
    scroll-behavior: smooth;
}

在移动设备上滚动时，Scrolltop 功能无法正常工作

2 个答案:

Element.scrollIntoView()

更新。