html - 仅锚标记垂直滚动，禁用水平滚动

Question

我有一个页面，左侧有一个菜单，其中包含右侧元素的锚点。单击左侧锚点时，我希望它仅垂直滚动（而不是水平滚动），以便无论如何左侧菜单都保留在屏幕上。基本上，我想要一个仅垂直的锚。

Answer 1

要么像这样使用 jquery：

$('a[href^="#"]').on('click', function(event) {
 target = this.id.offset().top;
 $('html,body').animate({
   scrollTop: target
  }, 1000);
event.preventDefault();
}

“点击页面内的任何链接，获取页面顶部的偏移量，并在 1 秒内将滚动动画向下滚动到该位置。”

或使用此插件http://flesler.blogspot.com/2007/10/jqueryscrollto.html进行更多控制。

Answer 2

一个插入式解决方案，香草 JS：

const scrolledParentSelector = ".app-content"; // or e.g. body
const scrolled = document.querySelector(scrolledParentSelector);

const anchors = document.querySelectorAll("a[href^='#']"); // hash tag anchor href starts with '#'
anchors.forEach(a => {
  a.onclick = function(e) {
    e.preventDefault();
    const href = a.getAttribute("href").slice(1); // remove initial '#'
    const target = document.querySelector(`[id='${href}']`);
    const top = target.offsetTop;
    scrolled.scrollTop = top;
  };
});