Question

I'm working on a portfolio website and have the following HTML for the nav section (wanted to create a hamburger nav):

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

However, when I'm trying to link internally, it doesn't go anywhere (about me for instance). I have the ID set up for the section I want it to link to, but it doesn't work. Tried switching div class to div id as well and didn't work.

I have a feeling it's because of this peeler feature I added in the JS that creates a peeling effect for the website when user scrolls:

(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);

Appreciate any help, thanks!!

Annette

Answer 1

你的错误在于：

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

您需要使用name标记而不是id标记来使锚点正常工作。

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

<a> tag not working despite HTML set up correctly

1 个答案: