从外部页面跳转至page1.html指定区块时jQuery锚点滚动失效及$未定义问题的解决求助

Let's work through your problem step by step—first we'll fix the $ is not defined error, then get the smooth scroll working when jumping from page2.html to page1.html's target section.

1. Fix the "$ is not defined" Error #

This error means jQuery isn't loaded before your custom JavaScript runs. Make sure you include jQuery before any of your own scripts in page1.html. For example, add this in the <head> section (use a local copy of jQuery instead of a CDN if you prefer):

<script src="jquery.min.js"></script>

Double-check the file path to ensure it points correctly to your jQuery file.

2. Update the Scroll Logic to Handle External Jumps #

Your original code only handles click events on links within page1.html. When jumping from page2.html, page1 loads directly with the hash in the URL—so we need to detect that hash on page load and trigger the scroll manually. We'll also merge this with your existing scroll logic to keep everything consistent.

Replace your current JavaScript in page1.html with this updated code:

$(document).ready(function(){
  // Handle internal link clicks (keep your original navigation behavior)
  $('a[href^="#"]').click(function(e){
    e.preventDefault();
    $('nav').removeClass('visible');
    
    // Check if the link uses data-scrollto (your original pattern)
    var targetClass = $(this).data('scrollto');
    if (targetClass) {
      $('html,body').stop().animate({
        scrollTop: $('.' + targetClass).offset().top - 65 
      }, 700, 'easeInOutExpo');
    } 
    // Handle direct hash links (like the one from page2.html)
    else if (this.hash) {
      var hash = this.hash;
      $('html,body').stop().animate({
        scrollTop: $(hash).offset().top - 65 // Match your navbar offset
      }, 700, 'easeInOutExpo', function(){
        window.location.hash = hash;
      });
    }
  });

  // Auto-scroll to target section when page loads with a hash (from external jump)
  var initialHash = window.location.hash;
  if (initialHash) {
    // Make sure the target element exists to avoid errors
    if ($(initialHash).length) {
      $('html,body').stop().animate({
        scrollTop: $(initialHash).offset().top - 65 // Keep navbar offset consistent
      }, 700, 'easeInOutExpo');
    }
  }
});

Key Notes to Make This Work: #

• Match Hash to Element ID: Your link page1.html#splash targets an element with id="splash" in page1.html. Ensure your target section has this ID (e.g., <section id="splash">...</section>). If you were using a class instead, adjust the selector in the code to $('.' + initialHash.slice(1)) (this removes the # and targets the class).
• Consistent Offset: The -65 value matches your original code—this accounts for your navbar height so the section doesn't get hidden under the header. Adjust this number if your navbar height changes.
• Smooth Scroll Timing: We kept the 700ms duration and easeInOutExpo easing to match your original behavior, so the scroll feels consistent across all interactions.

Test your link from page2.html again—page1 should now load and smoothly scroll to the #splash section automatically.

内容的提问来源于stack exchange，提问作者L F