锚点无法跳转求助：URL变化但页面不滚动（Chrome最新版）

Hey there, let's break down why your anchor links aren't scrolling the page even though the URL updates on hover—especially since removing CSS fixed it, that's a big clue!

Likely Culprits & Fixes #

1. Body's overflow-y: scroll is messing with scroll context

When you set overflow-y: scroll on the <body> element, it turns the body into an independent scroll container instead of using the default <html> scroll context. Chrome's anchor link behavior relies on targeting the root scroll container (usually <html>), so if the scrollable area is now the body, the browser gets confused about where to scroll.

Try adjusting your CSS:

html {
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  margin: 0;
  color: #222;
  background-color: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  /* Remove overflow-y: scroll here, or replace with auto */
  overflow: auto;
}

By shifting the scroll property to <html> and letting <body> use overflow: auto, you restore the default scroll context that anchor links expect.

2. Conflict with the localScroll plugin

The localScroll plugin handles smooth scrolling, but it might not be configured to work with your custom scroll container (the body, in this case). If the plugin is targeting the wrong element for scrolling, it'll prevent the native anchor behavior without triggering the scroll itself.

Fix the plugin configuration:
Specify the scroll target explicitly to match your scrollable container:

$('.scroll').localScroll({
  target: 'body' // Tell the plugin to scroll the body element
});

If that doesn't work, consider replacing the plugin with native browser smooth scrolling for better compatibility with modern Chrome:

$('.scroll a').on('click', function(e) {
  e.preventDefault();
  const targetElement = document.querySelector($(this).attr('href'));
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
});

This uses the native scrollIntoView API, which is well-supported in latest Chrome and avoids plugin conflicts.

3. Check for other interfering code

If the above fixes don't work, look for other CSS/JS that might block scrolling:

• Are there any position: fixed elements covering the anchor targets?
• Do you have custom scroll event listeners that call preventDefault() or stop propagation?
• Are there any other smooth scroll scripts running alongside localScroll?

Final Notes #

The core issue here is almost certainly a mismatch between the scroll container your CSS creates and what Chrome (or the localScroll plugin) expects for anchor links. By aligning those two, you should get your anchor jumps working again.

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