网站首页JS打字机动画从站内页面返回后停止运行求助

Hey Kritika, let's tackle these two issues one by one—they're totally fixable even if you're new to coding! 😊

The problem here is that modern browsers use a back/forward cache (bfcache) to speed up navigation between pages. When you return to your homepage via the back button, homepage icon, or tab, the browser loads the page from this cache instead of reloading it entirely. Since your script only runs on window.onload (which only triggers on the first full page load), the animation never restarts.

The Fix: #

We'll add a listener for the pageshow event, which fires both on first load AND when the page is retrieved from the bfcache. Here's how to update your script:

// Move the typewriter initialization into a reusable function
function initTypewriter() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtType(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS (we'll add color here too!)
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff; color: #ce3635; }";
  document.body.appendChild(css);
}

// Run on first page load
window.onload = initTypewriter;
// Run when page loads from cache (back/forward navigation)
window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    initTypewriter();
  }
});

Your original color wasn't working for two reasons:

1. text-color isn't a valid CSS property—you need to use color instead.
2. The <a> tag has a default blue color that was overriding your body style.

The Fix: #

First, fix your invalid HTML (you can't nest a <body> tag inside an <h5>—that breaks page structure):

<h5>Hi! My name is Kritika. I am
  <a class="typewrite" data-period="2000" data-type='[ "designer.", "a creative.", "a storyteller.", "an entrepreneur." ]'>
    <span class="wrap"></span>
  </a>
</h5>

Then update your CSS to target the typewriter text directly:

<style>
  body {
    text-align: left;
    margin-top: 25%;
    /* Optional: set a default color for other body text */
    color: #333;
  }
  /* Target the typewriter link to set your custom color */
  .typewrite {
    color: #ce3635;
    text-decoration: none; /* Remove the default underline on the <a> tag */
  }
</style>

Putting it all together, here's your working code with both fixes:

<h5>Hi! My name is Kritika. I am
  <a class="typewrite" data-period="2000" data-type='[ "designer.", "a creative.", "a storyteller.", "an entrepreneur." ]'>
    <span class="wrap"></span>
  </a>
</h5>

<style>
  body {
    text-align: left;
    margin-top: 25%;
    color: #333;
  }
  .typewrite {
    color: #ce3635;
    text-decoration: none;
  }
</style>

<script>
  var TxtType = function(el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
  };

  TxtType.prototype.tick = function() {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting) {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

    var that = this;
    var delta = 200 - Math.random() * 100;

    if (this.isDeleting) { delta /= 2; }

    if (!this.isDeleting && this.txt === fullTxt) {
      delta = this.period;
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === '') {
      this.isDeleting = false;
      this.loopNum++;
      delta = 500;
    }

    setTimeout(function() {
      that.tick();
    }, delta);
  };

  function initTypewriter() {
    var elements = document.getElementsByClassName('typewrite');
    for (var i=0; i<elements.length; i++) {
      var toRotate = elements[i].getAttribute('data-type');
      var period = elements[i].getAttribute('data-period');
      if (toRotate) {
        new TxtType(elements[i], JSON.parse(toRotate), period);
      }
    }
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff; color: #ce3635; }";
    document.body.appendChild(css);
  }

  window.onload = initTypewriter;
  window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
      initTypewriter();
    }
  });
</script>

Give these changes a try—they should get your animation working reliably across all navigation scenarios and your text looking exactly how you want it. Happy coding! 🚀

内容的提问来源于stack exchange，提问作者Kritika Kushwaha