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

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

javascript html

Javascript 在网页内导航而不附加#href（浏览器后退按钮）,javascript,html,Javascript,Html,如何在不记住历史的情况下导航到网页中的各个部分？也就是说，假设我使用以下代码。当我点击About时，它会将我带到About部分。但它也在URL中添加了#about。问题是，如果我在Home和About之间交替单击10次以在页面内导航，那么当我单击browser back按钮时，我会像堆栈一样回溯所有操作。我希望它完全出来的网页。如何做到这一点 <!DOCTYPE html> <html> <head> <title>testing</

如何在不记住历史的情况下导航到网页中的各个部分？也就是说，假设我使用以下代码。当我点击

About

时，它会将我带到About部分。但它也在URL中添加了#about。问题是，如果我在

Home

和

About

之间交替单击10次以在页面内导航，那么当我单击browser back按钮时，我会像堆栈一样回溯所有操作。我希望它完全出来的网页。如何做到这一点

<!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脚本。

使用：

element.scrollIntoView()

在html中：

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

元素名称

注意：任何标签都可以。。。

将丢失下划线和颜色更改-可通过样式进行修复。（平面、带样式）按钮怎么样？

使用：

element.scrollIntoView()

在html中：

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

元素名称

注意：任何标签都可以。。。

将丢失下划线和颜色更改-可通过样式进行修复。（平面、带样式）按钮怎么样？

您可以使用纯HTML完成以下工作：






家，甜蜜的家！
关于我

这就是你的想法，但在实践中，你应该编写更有组织的JavaScript，并且可能需要像JQuery这样的库的帮助来构建一个有用的带有导航的网站或应用程序。即使在本例中，仍有许多改进空间：

里面塞满了大量冗长重复的代码，外部JavaScript脚本或应用程序可以解决这个问题
多亏了
```
history.pushState
```
，按钮链接和浏览器的前后运行与预期一致（查看地址栏中的URL更改，而不刷新页面），但只要刷新页面，就会出现错误。在客户端的帮助下，您需要一个web服务器来提供正确的内容以使其正常工作

更新改进的版本，有组织的脚本和动画，演示如何使用文件中的CSS和脚本


测试
部分{
位置：绝对位置；
左：-800px；
顶部：100px；
过渡：左。6s；
}
第1节可见{
左：200px；
}
导航功能（第页）{
如果（第=='页关于'）{
document.getElementById（'home'）.classList.remove（'visible'）；
document.getElementById（'about'）.classList.add（'visible'）；
pushState（null，null，'about'）；
}否则{
document.getElementById（'about'）.classList.remove（'visible'）；
document.getElementById（'home'）.classList.add（'visible'）；
pushState（null，null，'home'）；
}
}




家，甜蜜的家！
关于我

您可以使用纯HTML完成以下工作：






家，甜蜜的家！
关于我

里面塞满了大量冗长重复的代码，外部JavaScript脚本或应用程序可以解决这个问题
多亏了
```
history.pushState
```
，按钮链接和浏览器的前后运行与预期一致（查看地址栏中的URL更改，而不刷新页面），但只要刷新页面，就会出现错误。在客户端的帮助下，您需要一个web服务器来提供正确的内容以使其正常工作

更新改进的版本，有组织的脚本和动画，演示如何使用文件中的CSS和脚本


测试
部分{
位置：绝对位置；
左：-800px；
顶部：100px；
过渡：左。6s；
}
第1节可见{
左：200px；
}
导航功能（第页）{
如果（第=='页关于'）{
document.getElementById（'home'）.classList.remove（'visible'）；
document.getElementById（'about'）.classList.add（'visible'）；
pushState（null，null，'about'）；
}否则{
document.getElementById（'about'）.classList.remove（'visible'）；
document.getElementById（'home'）.classList.add（'visible'）；
pushState（null，null，'home'）；
}
}




家，甜蜜的家！
关于我

什么是

；pushState（null，null，'about'）

do？没有它，一切似乎都可以正常工作。@SeverusTux这是历史API的一部分，它允许您进行前后导航。添加了一些演示动画如果我注释掉

历史记录.pushState…

，我看不到任何区别。虽然不容易看到，但有区别。你可以让它在没有历史记录的情况下工作，但是你不能使用后退按钮来前后移动（主页->关于->回到主页等等），你只在一个页面上。这是你问题的一个重要部分，我猜想

是什么；pushState（null，null，'about'）

do？没有它，一切似乎都可以正常工作。@SeverusTux这是历史API的一部分，它允许您进行前后导航。添加了一些演示动画如果我注释掉

历史记录.pushState…

，我看不到任何区别。虽然不容易看到，但有区别。你可以让它在没有历史的情况下运行，但你不能使用背面