jQuery实现固定按钮点击跳转至下一个section问题咨询

Let's break down why your current code only works partially, then fix it with two solid solutions depending on your needs.

What's Wrong with Your Current Code? #

1. Static Index Problem: $a.index(this) will always return 0 if you only have one .down-btn on the page. That means ++i becomes 1 every time you click, so you'll keep trying to jump to the same target element forever.
2. Target Selection Might Be Off: You defined $targets as $('div.next-section').next() — this selects the sibling after each .next-section element. If your goal is to jump to the .next-section elements themselves, this is incorrect.
3. No Tracking of Current Position: Your code doesn't keep track of where the user is currently scrolled, so it can't reliably find the "next" section in sequence.

Solution 1: Sequential Fixed-Order Jumps #

Use this if you want the button to cycle through sections in a fixed order, regardless of manual scrolling:

// Initialize elements and state
const $scrollBtn = $('.down-btn');
const $sections = $('div.next-section'); // Adjust this if you need .next-section's sibling instead
let currentSectionIndex = -1;

$scrollBtn.on('click', function(e) {
    e.preventDefault();
    
    // Increment index, loop back to start if we reach the end (optional)
    currentSectionIndex++;
    if (currentSectionIndex >= $sections.length) {
        currentSectionIndex = 0; // Remove this line if you want to stop at the last section
    }
    
    // Get the target section's top offset and animate scroll
    const targetOffset = $sections.eq(currentSectionIndex).offset().top;
    $('html, body').stop().animate({ scrollTop: targetOffset }, 400);
});

Solution 2: Smart Jump Based on Current Scroll Position #

Use this if you want the button to always jump to the next section below the user's current scroll position (even if they manually scroll around):

const $scrollBtn = $('.down-btn');
const $sections = $('div.next-section');

$scrollBtn.on('click', function(e) {
    e.preventDefault();
    
    const currentScrollPos = $(window).scrollTop();
    // Find the first section that's below the current scroll position
    const nextSection = $sections.filter(function() {
        return $(this).offset().top > currentScrollPos;
    }).first();
    
    if (nextSection.length) {
        // Scroll to the found section
        const targetOffset = nextSection.offset().top;
        $('html, body').stop().animate({ scrollTop: targetOffset }, 400);
    } else {
        // Optional: If we're at the last section, scroll back to top
        $('html, body').stop().animate({ scrollTop: 0 }, 400);
    }
});

Quick Adjustments to Match Your DOM #

If you did intend to jump to the sibling element of .next-section (not the section itself), just replace $('div.next-section') with $('div.next-section').next() in either solution.

Bonus: Add Visual Feedback #

You can highlight the active section once scrolling completes by adding a callback to the animate function:

$('html, body').stop().animate({ scrollTop: targetOffset }, 400, function() {
    $sections.removeClass('active');
    nextSection.addClass('active'); // Or $sections.eq(currentSectionIndex) for Solution 1
});

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