尽管 HTML 设置正确，<a> 标记仍无法正常工作答案

【问题标题】：<a> tag not working despite HTML set up correctly尽管 HTML 设置正确，<a> 标记仍无法正常工作
【发布时间】：2017-12-05 23:05:04
【问题描述】：

我正在开发一个投资组合网站，并为导航部分提供以下 HTML（想要创建一个汉堡导航）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="Annettte Lin Personal Portfolio">

    <title>Annette Lin Personal Porfolio</title>
    <link href="https://fonts.googleapis.com/css?
        family=Source+Sans+Pro:400,600,600i,700" rel="stylesheet">
    <!-- external CSS files -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href="css/peeler.css" rel="stylesheet"><br type="_moz">
</head>

<body>
    <article>
        <nav class="navigation">
            <div id="menuToggle">
                <input type="checkbox" />
                <span></span>
                <span></span>
                <span></span>
                <ul id="menu">
                    <a href="#">
                        <li>Home</li>
                    </a>
                    <a href="#about">
                        <li>About Me</li>
                    </a>
                    <a href="#resume">
                        <li>Resume</li>
                    </a>
                    <li>Contact</li>
                </ul>
            </div>
        </nav>
        <div class="homepage-image">
            <h1>Annette Lin</h1>
            <h2>New York City tech enthusiast embracing her inner nerd and always on the hunt for good food. Constantly. </h2>
            <p>“Tell me and I forget, teach me and I may remember, involve me and I learn.”</p>
        </div>
    </article>
    <article>
        <div class="about-me">
            <h1 id="about">About Me</h1>
            <p> about me text </p>
        </div>
    </article>

但是，当我尝试内部链接时，它不会去任何地方（例如关于我）。我已经为我希望它链接到的部分设置了 ID，但它不起作用。也尝试将 div 类切换为 div id，但没有成功。

我有一种感觉是因为我在 JS 中添加了这个削皮器功能，它在用户滚动时为网站创建了削皮效果：

(function() {
   var ABOVE = "1000";

   var root = this,
   Peeler = function(opts) {
    this.options = opts || {};
  },
  articles = document.querySelectorAll("article"),
  backgroundImages = document.querySelectorAll(".background"),
  viewportWidth = root.innerWidth,
  aspectRatio = 1200/1440,
  bodyHeight = 0,
  articleStates = [];

  Peeler.prototype.bind = function(opts) {
  var article,
    i,
    len,
    height,
    currentOffset,
    backgroundImage,
    prevScroll = 0;

    root.onscroll = function(event) {
    var yOffset = window.pageYOffset,
      i = 0,
      j = 0,
      triggered = false,
      below = 999,
      curr,
      len = articles.length,
      scrollingDown;

  for (; i < len; i++) {
    if (yOffset <= articleStates[i].max && yOffset >= 
  articleStates[i].min) {
      offset = -(yOffset-(articleStates[i].min));
      scrollingDown = prevScroll < document.body.scrollTop;

      // Trigger peel event when the offset reset
      if (offset > currentOffset) {
        // If we are scrolling down, trigger next callback
        if (scrollingDown && typeof this.options.nextCallback === 
      "function") {
          this.options.nextCallback(articles[i]);
        } else {


        }
      }

      prevScroll = document.body.scrollTop;
      currentOffset = offset;

      articles[i].style.marginTop = -(yOffset-(articleStates[i].min)) + 
     "px";
      articles[i].style.zIndex = ABOVE;
      triggered = true;
      curr = i;
      break;
    }
  }

  for (;j < len; j++) {
    if (i !== curr && i < len) {
      articles[i].style.marginTop = "0px";
      articles[i].style.zIndex = below--;
    }
    i++;
    // Reset at rotation point
    if (i == len) {
      i = 0;
    }
  }


  if (!triggered) {
      articles[0].style.marginTop = "0px";
      articles[0].style.zIndex = ABOVE;
  }
}.bind(this);

articles[0].style.zIndex = "2";


for (i = 0, len = articles.length; i < len; i++) {
  article = articles[i];

  height = article.getAttribute("data-height") || window.innerHeight;
  article.style.height = parseInt(height) + "px";
  articleStates.push({min: bodyHeight, max: bodyHeight+height});
  bodyHeight += height;
}

for (i = 0, len = backgroundImages.length; i < len; i++) {
  backgroundImage = backgroundImages[i];
  backgroundImage.style.background = "url(" + backgroundImage.src + ") 
  no-repeat center center";
  backgroundImage.style.backgroundSize = "cover";
  backgroundImage.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
}

  document.body.style.height = bodyHeight + "px";
  };

 Peeler.prototype.peel = function() {
 };

root.Peeler = Peeler;
}).call(this);

感谢任何帮助，谢谢！

安妮特

【问题讨论】：

您是否尝试过禁用剥离器脚本？看看没有它是否有效？如果您可以创建一个重现问题的 JSFiddle，我们也会为您提供帮助。
是的，实际上我能够将问题缩小到 CSS 文件：
致力于将我现在拥有的 js fiddle 放在一起：jsfiddle.net/3L4xx7pg/2

标签： html css broken-links

【解决方案1】：

你的错误在于：

<div class="about-me">
    <h1 id = "about">About Me</h1>
    <p> about me text </p>
</div>

您需要带有名称标签而不是 id 标签的东西才能使锚点正常工作。

<div class="about-me">
    <h1 id = "about" name = "about">About Me</h1>
    <p> about me text </p>
</div>

【讨论】：

ID属性就够了。
id 应该可以将元素标记为锚点。