1

私はここではまったく新しいので、このデザイナーはプログラミングの助けが必要です。私のプログラミング スキルは、HTML とほんの少しの JavaScript に限られています (実装はできますが、書くことはできません)。

私は自分の問題の答えを探していたので、動作しない人、すべてのブラウザー (特にクロム) と互換性がない人、または自分の要求に合わせてスクリプトを編集する方法がわからない人しか見つけることができませんでした。

問題：

  1. 「diensten.html」ページの UL リストからリンクをクリックすると、そのリンクは div に読み込まれる必要があります。div が配置されているページ「diensten.html」では、div の上と下に上下に 2 つのボタンがあります。下ボタンをクリックすると、DIV にロードされたページは次のアンカーまで下にスクロールする必要があります。前のアンカーにスクロールして戻る必要がある上ボタンと同じです。

私は PHP と mysql が有効になっている Web サーバーを持っているので、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 に答える