在网页内导航而不附加 #href（浏览器后退按钮）

Question

如何在不记住历史记录的情况下导航到网页内的部分？ 也就是说，假设我使用以下代码。 当我单击About时，它会将我带到 About 部分。 但它还在 URL 中添加了#about。 问题是，如果我在Home和About之间交替单击 10 次以在页面内导航，那么当我单击浏览器后退按钮时，我会像堆栈一样回溯我的所有操作。 我希望它完全脱离网页。 如何做到这一点？

<!DOCTYPE html>
<html>
<head>
    <title>testing</title>
</head>
<body>
    <ul class="nav">
        <li><a href="#home"> Home</a></li>
        <li><a href="#about"> About</a></li>
    </ul>
    <section id="home" style="margin-top: 100%">
        Home Sweet Home!
    </section>
    <section id="about" style="margin-top: 100%">
        About Me
    </section>
</body>
</html>

PS：如果仅使用 html 无法实现，则使用 java 脚本即可。

Answer 1

利用：

element.scrollIntoView()

element=document.getElementById("element's id")

在 html 中：

<a onclick="elementId.scrollIntoView()">element name</a>

注意：任何标签都可以...... <a>将失去下划线和颜色变化 - 可以用样式修复。 （扁平，带样式）按钮怎么样？

Answer 2

您可以像这样使用纯 HTML 完成这项工作：

<body>
<ul class="nav">
    <li><a href="#home" onclick="event.preventDefault();document.getElementById('about').style.display='none';document.getElementById('home').style.display='block';history.pushState(null,null,'home')"> Home</a></li>
    <li><a href="#about" onclick="event.preventDefault();document.getElementById('home').style.display='none';document.getElementById('about').style.display='block';history.pushState(null,null,'about')"> About</a></li>
</ul>
<section id="home" style="">
    Home Sweet Home!
</section>
<section id="about" style="display: none;">
    About Me
</section>
</body>

这只是为了让您明白这一点，但在实践中，您应该编写更有条理的 JavaScript 并且可能需要 JQuery 之类的库的帮助来构建一个有用的网站或带有导航的应用程序。 即使在这个例子中，也有很大的改进空间：

里面塞满了很多冗长且重复的代码，外部 JavaScript 脚本或应用程序将解决问题。
感谢history.pushState ，按钮链接和浏览器来回按预期工作（在地址栏中查看 URL 更改而无需刷新页面），但是一旦刷新页面，就会出现错误。 您需要一个 web 服务器来提供正确的内容以使其正常工作，同时也需要客户端的帮助。

更新

改进的版本，包含有组织的脚本和 animation，以演示您可以使用文件内 CSS 和脚本做什么。

<!DOCTYPE html>
<head>
   <title>testing</title>
   <style>
        section {
            position: absolute;
            left: -800px;
            top: 100px;
            transition: left .6s;
        }
        section.visible {
            left: 200px;
        }
    </style>
    <script>
        function navTo(page) {
            if (page === 'about') {
                document.getElementById('home').classList.remove('visible');
                document.getElementById('about').classList.add('visible');
                history.pushState(null, null, 'about');
            } else {
                document.getElementById('about').classList.remove('visible');
                document.getElementById('home').classList.add('visible');
                history.pushState(null, null, 'home');
            }
        }
    </script>
</head>

<body>
<ul class="nav">
    <li><a href="#home" onclick="event.preventDefault();navTo('home')">
        Home</a></li>
    <li><a href="#about" onclick="event.preventDefault();navTo('about')">
        About</a></li>
</ul>
<section id="home" class="visible">
    Home Sweet Home!
</section>
<section id="about">
    About Me
</section>

</body>
</html>

在网页内导航而不附加 #href（浏览器后退按钮）

问题描述

2 个解决方案

解决方案1
1 2020-06-23 11:51:25

解决方案2
1 已采纳 2020-06-23 11:57:58

更新

在网页内导航而不附加 #href（浏览器后退按钮）

问题描述

2 个解决方案

解决方案1 1 2020-06-23 11:51:25

解决方案2 1 已采纳 2020-06-23 11:57:58

更新

解决方案1
1 2020-06-23 11:51:25

解决方案2
1 已采纳 2020-06-23 11:57:58