scrollIntoView()绑定导航按钮失效问题求助

Fixes to Resolve the Scroll Issue #

1. Correct the onclick Attribute Values #

Your button onclick handlers are passing unquoted identifiers (e.g., Community) which JavaScript interprets as undefined variables instead of string IDs. Wrap each target div ID in single or double quotes to pass them as valid string literals:

<button onclick="scrollToSection('Community')">Community</button> <br />
<button onclick="scrollToSection('TypesAndRates')">Room Types and Rates</button> <br />
<button onclick="scrollToSection('ServicesAndAmenities')">Services and Amenities</button> <br />
<button onclick="scrollToSection('Map')">Map</button> <br />

2. Rename Your Custom Function to Avoid Naming Conflict #

The function name scroll clashes with the native browser window.scroll() method, which can cause your custom logic to be ignored or overridden. Rename it to a unique name like scrollToSection:

<script>
    // Scroll to the specified section by ID
    function scrollToSection(divName)
    {
        const section = document.getElementById(divName);
        if (section) { // Prevent errors if the target element doesn't exist
            section.scrollIntoView(true);
        }
    }
</script>

3. Optional: Add Error Handling #

The check for the existence of the target element (if (section)) prevents JavaScript console errors if the ID is mistyped or the element is missing, making debugging easier.

Why This Works #

• Quoting the IDs ensures JavaScript recognizes them as the exact string values of your div IDs, allowing getElementById to locate the correct elements.
• Renaming the function eliminates conflicts with the browser's built-in scroll functionality, ensuring your custom scroll logic runs as intended.

Even if you didn’t modify the HTML/JS recently, subtle changes (like accidental quote removal) or browser behavior updates could have triggered this issue. These fixes should fully restore the scroll functionality.

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