0

そのため、いくつかのページで div id への簡単なリンクを使用しています。

<a href="#mydiv">my link</div>

参照 -現在のサイト

問題は、これらのリンクをクリックすると、メイン ラッパーが不可解に変化することです。ただし、ブラウザの高さが 800 未満の場合のみ。私は困惑しています。

このサイズで動作します。

その後、800 未満の高さに変更します。

そしたら何故か跳ねる。

ブラウザを小さくドラッグすると、スマートフォン スタイルになります...そして、すべてがそこで機能しています...

どんな助けでも最高です!!!

4

1 に答える 1

1

コメントで言ったように、これは#links の通常の動作です。クリックすると、参照された要素が一番上になるようにページがスクロールされます。onlyを使用すると、問題に対する明らかな解決策はありませんCSS。

ページを個別のファイルに分割する (#link の使用を避けるため) か、JavaScript を使用して動作させることができますpreventDefault。後のソリューションのコードに飛び込みます。jQuery を使用して申し訳ありませんが、ここでははるかに高速です。

したがって、コード: http://jsfiddle.net/vL6Xn/3/

$('a[href^="#"]').each(function () {
    var sel = $(this).attr('href');
    $(this).click(function (e) {
        if ($(sel).length) {
            e.preventDefault();
            var $cont = $(sel).parent().parent();
            var scrollVal = $cont.scrollTop() + $(sel).position().top;
            $cont.scrollTop(scrollVal);
        }
    });
});

それがすることは次のとおりです。

  1. # で始まるa属性を持つ要素を選択href
  2. hrefクリック時のバインド アクション:属性で参照されている要素を選択しようとし、存在する場合は...
  3. ...デフォルトの動作を防ぎ、適切な位置にスクロールします。

編集：

あなたの場合、スクロールは要素の親の親に適用されます。私は間違ってそれが親であると思い込んでいました。私のコードの更新を参照してください。

于 2012-09-27T07:32:40.837 に答える