javascript - 使用下一个和上一个 anchor 按钮在 div 中加载外部页面

Question

我是这里的新手，这位设计师需要一些编程方面的帮助。我的编程技能仅限于 HTML 和很少的 javascript(我可以实现它，但不会编写它)。

由于我一直在寻找问题的答案，所以我只能找到那些无法工作、与所有浏览器(特别是 Chrome)不兼容或不知道如何根据自己的要求编辑脚本的人。

问题:

1. 当我单击“diensten.html”页面上 UL 列表中的链接时，该链接必须加载到 div 中。在放置 div 的页面“diensten.html”上，div 的顶部和底部应该有 2 个按钮，向上和向下。当单击向下按钮时，已加载到 DIV 中的页面必须向下滚动到下一个 anchor 。与必须滚动回上一个 anchor 的向上按钮相同。

我有一个启用了 PHP 和 mysql 的网络服务器，因此如果可以更轻松地使用 PHP 来完成，那就没问题了。

我希望你们(拥有大量的编程知识)有一种(简单的)方法来建立这种脚本？

非常感谢

..作为一个荷兰人，我很抱歉我的英语不好;-)

问候，

Answer 1

如果你愿意使用jQuery，你可以使用jQuery的animate函数来实现点击或鼠标悬停时的平滑滚动效果。下面是一个例子

var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    // Cancel scrolling continuously:
    scrolling = false;
});


$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            // If we want to keep scrolling, call the scrollContent function again:
            scrollContent(direction);
        }
    });
}