Question

我想使用标记跳到html页面中的部分：

<a href="#details">example</a>

部分ID：

<div id="details"></div>
<section id="viewad-details">

页面本身包含一个我需要保留的基本标记：

<base href=//domain.com/">

文档类型（相当古老的遗产）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

以某种方式不起作用，单击链接将加载主页，而不是跳转到div ID。我本来也打算跳到本节的，但效果相同。

如何在将基本标签保持在原位的同时实现此功能？

Answer 1

这对HTML5可行，如以下代码所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>


<body>
<a href="#details">example</a>
<div id="ipsum" style="width: 200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar maximus sem a condimentum. Nunc sapien arcu, mollis et diam eu, tempor euismod orci. Sed blandit, erat quis laoreet vehicula, diam ipsum tempor turpis, vel suscipit nisl urna euismod orci. Nulla rutrum efficitur nisi et molestie. Curabitur a sollicitudin justo. Curabitur nunc ligula, malesuada pharetra pulvinar vitae, maximus in nisl. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus molestie turpis, quis gravida mauris dictum vel. Suspendisse semper est sed tortor pretium, eget tincidunt massa viverra. Donec et ullamcorper lorem. Cras posuere quam lorem, vitae fringilla diam posuere in. Vivamus et porta enim, ac hendrerit lacus.

Mauris non odio at odio elementum consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non ligula feugiat, tincidunt risus sit amet, blandit elit. Sed eu fermentum purus. Nam maximus nunc elementum, fermentum neque sit amet, vulputate lorem. Sed nec urna quis nisi vulputate iaculis ac in nisl. Sed convallis leo vitae efficitur scelerisque. In dictum justo at diam convallis, ut sagittis neque cursus. Phasellus viverra, risus at cursus cursus, est tellus ullamcorper arcu, id pharetra ligula magna vel leo. Cras libero mi, aliquet a aliquam nec, euismod nec felis. Vivamus ac arcu id lectus ultricies tincidunt quis iaculis velit. Nam porttitor laoreet eros, eu laoreet massa fermentum a. Pellentesque cursus finibus leo, non interdum ligula.

</div>
<div id="details" style="background:beige;width:200px;height:200px;border:1px solid red">All the details</div>
<section id="viewad-details">

</body>
</html>

标题为“详细信息”的div也滚动到HTML 4.01中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>
<a href="#details">example</a>
<div id="ipsum" style="width: 200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar maximus sem a condimentum. Nunc sapien arcu, mollis et diam eu, tempor euismod orci. Sed blandit, erat quis laoreet vehicula, diam ipsum tempor turpis, vel suscipit nisl urna euismod orci. Nulla rutrum efficitur nisi et molestie. Curabitur a sollicitudin justo. Curabitur nunc ligula, malesuada pharetra pulvinar vitae, maximus in nisl. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus molestie turpis, quis gravida mauris dictum vel. Suspendisse semper est sed tortor pretium, eget tincidunt massa viverra. Donec et ullamcorper lorem. Cras posuere quam lorem, vitae fringilla diam posuere in. Vivamus et porta enim, ac hendrerit lacus.

Mauris non odio at odio elementum consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non ligula feugiat, tincidunt risus sit amet, blandit elit. Sed eu fermentum purus. Nam maximus nunc elementum, fermentum neque sit amet, vulputate lorem. Sed nec urna quis nisi vulputate iaculis ac in nisl. Sed convallis leo vitae efficitur scelerisque. In dictum justo at diam convallis, ut sagittis neque cursus. Phasellus viverra, risus at cursus cursus, est tellus ullamcorper arcu, id pharetra ligula magna vel leo. Cras libero mi, aliquet a aliquam nec, euismod nec felis. Vivamus ac arcu id lectus ultricies tincidunt quis iaculis velit. Nam porttitor laoreet eros, eu laoreet massa fermentum a. Pellentesque cursus finibus leo, non interdum ligula.


</div>
<div id="details" style="background:cyan;width:200px;height:150px;border:1px solid red">All the details</div>
<section id="viewad-details">

</body>
</html>

但是，BASE标记似乎是药膏中众所周知的苍蝇。考虑以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<base href="https://www.example.com">	
</head>

<body>
<a href="#details">example</a>
<div id="ipsum" style="width: 200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar maximus sem a condimentum. Nunc sapien arcu, mollis et diam eu, tempor euismod orci. Sed blandit, erat quis laoreet vehicula, diam ipsum tempor turpis, vel suscipit nisl urna euismod orci. Nulla rutrum efficitur nisi et molestie. Curabitur a sollicitudin justo. Curabitur nunc ligula, malesuada pharetra pulvinar vitae, maximus in nisl. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus molestie turpis, quis gravida mauris dictum vel. Suspendisse semper est sed tortor pretium, eget tincidunt massa viverra. Donec et ullamcorper lorem. Cras posuere quam lorem, vitae fringilla diam posuere in. Vivamus et porta enim, ac hendrerit lacus.

Mauris non odio at odio elementum consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non ligula feugiat, tincidunt risus sit amet, blandit elit. Sed eu fermentum purus. Nam maximus nunc elementum, fermentum neque sit amet, vulputate lorem. Sed nec urna quis nisi vulputate iaculis ac in nisl. Sed convallis leo vitae efficitur scelerisque. In dictum justo at diam convallis, ut sagittis neque cursus. Phasellus viverra, risus at cursus cursus, est tellus ullamcorper arcu, id pharetra ligula magna vel leo. Cras libero mi, aliquet a aliquam nec, euismod nec felis. Vivamus ac arcu id lectus ultricies tincidunt quis iaculis velit. Nam porttitor laoreet eros, eu laoreet massa fermentum a. Pellentesque cursus finibus leo, non interdum ligula.

</div>
<div id="details" style="background:#ffdede;width:200px;height:140px;border:1px solid red">All the details</div>
<section id="viewad-details">

</body>
</html>

由于BASE标记的href值，所有相对URL都被判断为在example.com域的上下文中。结果，#details不是指当前页面的一部分，而是URL https://www.example.com#details的一部分。

建议的解决方案here建议对锚标记使用绝对网址。这是在我的本地服务器上使用以下BASE和ANCHOR标记的结果：

<base href="https://www.example.com">
<!-- other HTML -->
<a href="http://localhost/exp/div401Base.html#details">eXample</a>

当用户单击链接时，标题为“详细信息”的DIV会滚动到当前页面的视图中，从而避免重定向到URL https://example.com#details。

Answer 2

为了使链接以#符号起作用，代码需要具有锚点链接的“名称”属性。

<a name="details"><section id="viewad-details"></a>

W3C将此定义为HTML Anchor tags的功能：

NAME 可选的。如果存在，则属性NAME允许锚成为链接的目的地。该属性的值是锚点的标识符。标识符是任意字符串，但在HTML文档中必须是唯一的。然后，另一个文档可以通过将标识符放在地址后（用井号分隔）来显式地对此锚点进行引用。

Answer 3

这里有个例子

$(document).on('click', 'a[href^="#"]', function(event) {
  event.preventDefault();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top - 60
  }, 500);
});

.container {
  max-width: 900px;
  margin: auto;
}

header {
  text-align: center;
  background: #dcdcdc;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

header li {
  display: inline-block;
}

header li a {
  display: inline-block;
  font-size: 16px;
  color: #000;
  padding: 10px 20px;
}

section {
  min-height: 800px;
  padding: 30px;
  color: #fff;
  margin: 30px 0;
}

.section1 {
  background: #96CEB4;
}

.section2 {
  background: #FF6F69;
}

.section3 {
  background: #FFCC5C;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

</head>

<body>
  <div class="container">
    <header>
      <ul>
        <li>
          <a href="#1">Section1</a>
        </li>
        <li>
          <a href="#2">Section2</a>
        </li>
        <li>
          <a href="#3">Section3</a>
        </li>
      </ul>
    </header>

    <section class="section1" id="1">
      <h1>Section1</h1>
    </section>
    <section class="section2" id="2">
      <h1>Section2</h1>
    </section>
    <section class="section3" id="3">
      <h1>Section3</h1>
    </section>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>

为什么href＃跳到主页而不是div id？

3 个答案: