Question

我在这里完全是新手，这位设计师需要一些编程方面的帮助。我的编程技巧仅限于HTML和一点点javascript（我可以实现它，但不能写它）。

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

问题：

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

我有一个启用了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);
        }
    });
}

Answer 2

iframes更适合这种情况，假设您可以使用它们。使用iframes，您将能够在没有任何特殊标记的情况下跳转到加载的HTML中的锚点。此外，您可以避免将原始HTML加载到div中时遇到的许多麻烦。

我在jsfiddle上传了一个工作示例，但具有讽刺意味的是它不适用于jsfiddle;你需要下载资源并在你自己的机器上试用它们。 http://jsfiddle.net/waDUG/5/

这是它的工作原理。首先，用户单击“加载内容”按钮，在Javascript中调用load（）函数。这会将页面数据加载到iframe中。

加载的页面将具有由id为“anchor＃”的元素指定的锚点，其中“＃”是锚点编号。例如，加载的页面可能包含以下内容：

<h1 id="anchor1">Anchor1:</h1>
...

<h1 id="anchor2">Anchor2:</h1>
...

<h1 id="anchor3">Anchor3:</h1>
...

按下向上和向下按钮时，iframe将跳转到下一个锚点。

此代码的唯一问题是没有实现的方法来确定最后一个锚点，但如果它是已知值，则很容易被硬编码。

使用下一个和上一个锚点按钮在div中加载外部页面

2 个答案: