使用锚点导航，无需更改浏览器url和javascript_Javascript_Html

使用锚点导航，无需更改浏览器url和javascript

javascript html

使用锚点导航，无需更改浏览器url和javascript,javascript,html,Javascript,Html,在我的应用程序中，左侧有一个导航窗格，右侧有一个窗格中的内容。当您单击导航窗格中的项目时，它会通过使用jQuery ajax将内容动态加载到内容窗格中。加载内容时，我会更新浏览器的url。例如： www.mysite.com/content.html#section1 www.mysite.com/content.html#section2 www.mysite.com/content.html#section3 在内容中，我希望有链接到同一内容中的其他区域，以便当您单击它时，内容滚动到它。如

在我的应用程序中，左侧有一个导航窗格，右侧有一个窗格中的内容。当您单击导航窗格中的项目时，它会通过使用jQuery ajax将内容动态加载到内容窗格中。加载内容时，我会更新浏览器的url。例如：

www.mysite.com/content.html#section1
www.mysite.com/content.html#section2
www.mysite.com/content.html#section3

在内容中，我希望有链接到同一内容中的其他区域，以便当您单击它时，内容滚动到它。如果我使用典型的锚定标记，浏览器的url将得到更新，这是我想要避免的。我可以使用一个点击处理程序和一些Javascript来滚动到它。但是我想知道是否有一种方法可以在没有Javascript的情况下实现这一点。

没有Javascript你能做到吗？答案是不，你不能

您需要使用自定义单击事件。


<!DOCTYPE html>
<html>
<head>
<style>
html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

</body>
</html>

html{
滚动行为：平滑；
}
#第一节{
高度：600px；
背景颜色：粉红色；
}
#第2节{
高度：600px；
背景颜色：黄色；
}
平滑滚动
第一节
点击链接查看“平滑”滚动效果
注意：删除滚动行为属性可删除平滑滚动
第二节

可能有用的PFB链接：

我相信这会更新浏览器的url。您在给出的示例中看不到这一点，因为W3将测试代码包装在一个框架中。确切地说，只需制作一个示例html文件并粘贴它，然后尝试运行。如果它解决了您的问题，请将其作为正确答案进行投票