滚动功能使用 JavaScript 导航到适当的部分

Question

我的目标是使用 JavaScript 完成一个动态的单一登陆页面。 HTML 和 CSS 文件已经提供，我设法通过操作 DOM.

构建了一个无序列表

让我卡住的是：从导航菜单中单击一个项目时，link 应该滚动到相应的部分。我无法让它工作：/

以下是目前的 JS 代码。

/* Declare variables for the fictive document and menu list to retrieve and store variables as unordered list */
const container = document.createDocumentFragment();
const menuList = document.getElementsByTagName('section');

/* Function to create the navigation menu as a clickable link */
function navigationLink(id, name) {
    const navLink = `<a class = "menu__link" data-id=${id}">${name}</a>`;
    return navLink;
}

/* Function for the navigation list, built as an unordered list */
function createNavigation() {
    for (let i = 0; i < menuList.length; i++) {
        const newMenuListItem = document.createElement('li');
        const menuListName = menuList[i].getAttribute('data-nav')
        const menuListID = menuList[i].getAttribute('id')
        newMenuListItem.innerHTML = navigationLink(menuListID, menuListName)
        container.appendChild(newMenuListItem);
    }
    /* Retrieve the id from the ul section to be added to the document fragment: container */
    const navBarMenu = document.getElementById('navbar__list')
    navBarMenu.appendChild(container);
}

// Add class 'active' to section when near the top of viewport
function setActiveClass() {
    for (let i = 0; i < menuList.length; i++) {
        if (isInViewport(menuList[i])) {
            menuList[i].classList.add("your-active-class");
        } else {
            menuList[i].classList.remove("your-active-class");
        }
    }
}

为了解决这个问题，我查看了另一段我无法正常运行的代码。

function scrollToElement(event) {
    if (event.target.nodeName === 'A') {
        const menuListID = event.target.getAttribute('data-id');
        const menu = document.getElementById(menuListID);
        menu.scrollIntoView({ behavior: "smooth" });
    }
}
document.addEventListener('scroll', function () {
    setActiveClass();
});

const navBarMenu = document.getElementById('navbar__list')
navBarMenu.addEventListener('click', function (event) {
    scrollToElement(event)
})

Answer 1

您可以使用锚点来执行此操作。与尝试在 js 中执行此操作相比，这将使您的生活更轻松。

要使用它，您只需将 id 设置为一个节点。喜欢 <div id="myFirstId"></div> 然后，将 link 的 href 设置为 #myFirstId。

如果您不希望滚动是即时的，可以将 scroll-behavior: smooth 添加到可滚动元素。

html {
  scroll-behavior: smooth;
}
#scrollable {
  overflow:auto;
}
#firstDiv {
  background-color: green;
  height: 700px
}
#secondDiv {
  background-color: yellow;
  height: 200px;
}
#thirdDiv {
  background-color: blue;
  height: 500px;
}

<a href="#firstDiv">firstDiv</a>
<a href="#secondDiv">SecondDiv</a>
<a href="#thirdDiv">thirdDiv</a>
<div id="scrollable">
  <div id="firstDiv"></div>
  <div id="secondDiv"></div>
  <div id="thirdDiv"></div>
</div>

对于您的代码，只需更改此行 <a class = "menu__link" data-id=${id}">${name}</a>

对此<a class="menu__link" href="#${id}">${name}</a>

滚动功能使用 JavaScript 导航到适当的部分

Scroll function to navigate to appropriate section using JavaScript

javascript

scrollto