手机端常用js滑动效果

<a href="#section1" class="smooth-scroll">Go to Section 1</a>
<div id="section1">Section 1 Content</div>

<script>
document.querySelectorAll('.smooth-scroll').forEach(link => {
    link.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});
</script>

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">Item 1</div>
        <div class="carousel-item">Item 2</div>
        <div class="carousel-item">Item 3</div>
    </div>
</div>

<script>
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const totalItems = items.length;

function showNextItem() {
    items[currentIndex].style.display = 'none';
    currentIndex = (currentIndex + 1) % totalItems;
    items[currentIndex].style.display = 'block';
}

setInterval(showNextItem, 3000); // Change item every 3 seconds
</script>

function smoothScroll(target, duration) {
    const start = window.pageYOffset;
    const targetElement = document.querySelector(target);
    const targetPosition = targetElement.getBoundingClientRect().top + start;
    const distance = targetPosition - start;
    let startTime = null;

    function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const run = ease(timeElapsed, start, distance, duration);
        window.scrollTo(0, run);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function ease(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
}

html, body {
    touch-action: pan-x pan-y; /* 允许水平和垂直滚动 */
}