11

ここで他の投稿をチェックしましたが、探している結果はありません。クリックしたい

<a href="#about">About</a>
<div id="about">Content of this..</div>

アドレスバーにwww.domain.com/#aboutを入れずにその要素までスクロールさせます

完璧な例として、私がここで見つけたこのサイトをチェックして、いくつかのリンクをクリックしてください。クリックしてもアドレスバーは変わりません。

4

6 に答える 6

3

以下の例では、javascript と jquery を使用して、必要なことを行うことができます (これは古いバージョンの jquery を使用していることに注意してください)。

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <script type='text/javascript'>
    jQuery(document).ready(function($) {

        $(".scroll").click(function(event){
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
        });
    });
    </script>
</head>
<body>
    <a class="scroll" href="#codeword">Blue Words</a>
    <div id="codeword"></div>
</body>
</html>
于 2014-11-09T18:44:20.903 に答える
1

これを自分で試してみましたが、これがこのテーマに関する私の学習の要約です。

基本的なリンク コマンドは次のとおりです。

<A HREF="#codeword">Blue Words</A>

ジャンプがページをスクロールする場所を示す方法は次のとおりです。

<A NAME="codeword">

これが何が起こっているかです

A HREF コマンドは、リンクが URL ではなくコードワードであることを除いて、基本リンクと同じです。

コードワードの前に # 記号があることに注意してください。内部リンクであることを示すために必要です。# 記号がない場合、ブラウザーは、コードワードにちなんで名付けられたページの外部にあるものを探します。

あなたの「コードワード」は、あなたが望むものなら何でもかまいません。私はそれを短く保ち、ジャンプ先を示すように最善を尽くしています。使用できる文字数に制限があるかもしれませんが、まだ見つけていません。

ページがジャンプするポイントは、HREF という単語を NAME という単語に置き換える以外は、同じ一般的な形式に従います。

NAME コマンドに # 記号がないことに注意してください。

ノート！NAME ターゲットを配置した場所が、画面ブラウザの上部に表示されます。

それが役に立てば幸い。

于 2013-06-09T18:15:15.690 に答える
1 
window.location.hash = ""

私が見つけることができる可能な方法です。

hashの次の文字列を与える#．

于 2016-03-08T10:23:08.433 に答える
0

私にとっては、「return false;」を挿入するだけです。この問題を解決しました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" async></script>
<script>
jQuery(document).ready(function($) {
    $('a[href^=#]:not(a[href=#])').click(function() {
        $('html, body').animate({scrollTop: $(this.hash).offset().top}, 1300, 'easeInOutExpo');
        return false;
    });
});
</script>

(これは、ページ上のすべてのアンカー リンクに適用されます。)

于 2022-01-27T18:03:00.267 に答える