1

我是新来的，这个设计师需要一些编程方面的帮助。我的编程技能仅限于 HTML 和一点点 javascript（我可以实现它，但不会编写它）。

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

问题：

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

我有一个启用了 PHP 和 mysql 的网络服务器，所以如果它可以用 PHP 更容易地完成，那没问题。

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

非常感谢

..对不起我作为荷兰人的英语不好;-)

问候，

4

2 回答 2

0

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 将跳转到下一个锚点。

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

于 2012-10-08T14:08:31.343 回答
0

如果你愿意使用 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);
        }
    });
}
于 2012-10-08T12:50:15.830 回答