使用锚导航而不更改浏览器URL且不使用javascript

Question

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

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

在内容中，我希望具有指向相同内容中其他区域的链接，以便单击该内容时，内容会滚动到该区域。 如果使用典型的锚标记，则浏览器的URL将得到更新，这是我要避免的。 我可以使用点击处理程序和一些Javascript滚动到它。 但是我想知道是否有没有Java脚本的方法。

Answer 1

没有Java语言，您可以完成此操作吗？ 答案是否定的，你不能。

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

Answer 2

<!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>

可能有用的PFB链接： https ://www.w3schools.com/howto/tryit.asp ? filename = tryhow_css_smooth_scroll

使用锚导航而不更改浏览器URL且不使用javascript

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-03-19 08:49:30

解决方案2
0 2019-03-19 08:50:18

使用锚导航而不更改浏览器URL且不使用javascript

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-03-19 08:49:30

解决方案2 0 2019-03-19 08:50:18

解决方案1
1 已采纳 2019-03-19 08:49:30

解决方案2
0 2019-03-19 08:50:18