Question

在我的网页中，我有4个“航点”，它们在菜单中有各自的链接。我需要的是还将页面的滚动绑定到这些航点。因此，当页面加载时，指针位于顶部并且基于滚动方向，页面移动到下一个/上一个航点。到目前为止，我已经提出了这种简单的方法，由于scrollTo()函数再次触发整个方法，因此进入滚动循环。

$(function () {
    var top = $(window).scrollTop();
    var currentWaypoint = 0;
    var previousWaypoint = 0;
    $(window).scroll(function () {
        console.log("Scroll triggered");
        console.log("Current Waypoint: " + currentWaypoint);
        var curTop = $(window).scrollTop();
        if (top < curTop) {
            if (currentWaypoint < 4) {
                previousWaypoint = currentWaypoint;
                currentWaypoint=currentWaypoint+1;
            }
        }
        else {
            if (currentWaypoint > 0) {
                previousWaypoint = currentWaypoint;
                currentWaypoint=currentWaypoint-1;
            }
        }
        top = curTop;
        if (previousWaypoint != currentWaypoint) {
            switch (currentWaypoint) {
            case 1:
                $.scrollTo(document.getElementById("waypoint-collection"));
            case 2:
                $.scrollTo(document.getElementById("waypoint-report"));
            case 3:
                $.scrollTo(document.getElementById("waypoint-video"));
            case 4:
                $.scrollTo(document.getElementById("waypoint-mail"));
            default:
            }
        }
        console.log("New Waypoint: " + currentWaypoint);
    });
});

我已经看到在某些网站上实现了这种行为，但似乎无法找到与谷歌相关的任何内容。有什么想法吗？

修改

相关的HTML代码：

<html>
<head>
    <style>
        body {
            background-color: #FFFFFF;
        }

        .features-container-wh {
            min-height: 12.5rem;
            text-align: center;
            height: 100%;
        }

        .features-container-bl {
            background-color: #43bfcb;
            text-align: center;
            color: #FFFFFF;
            height: 100%;
        }

        .features-container-bottom {
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="features-container-wh">
        <a href="#waypoint-collection">Collection</a>
        <a href="#waypoint-report">Report</a>
        <a href="#waypoint-video">Video</a>
        <a href="#waypoint-mail">Mail</a>
    </div>
    <div class="features-container-bl" id="waypoint-collection">
        <p>Stuff...</p>
    </div>
    <div class="features-container-wh" id="waypoint-report">
        <p>Stuff...</p>
    </div>
    <div class="features-container-bl" id="waypoint-video">
        <p>Stuff...</p>
    </div>
    <div class="features-container-bottom" id="waypoint-mail">
        <p>Stuff...</p>
    </div>
</body>

Answer 1

$('html, body').animate({scrollTop: $("#.wayPoint1").offset().top}, 2000);

如何在jQuery中从航点滚动到航点？

1 个答案: