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;
  };
});

仅锚标签垂直滚动，禁用水平滚动

2 个答案: