6

ホームページの下部に連絡先フォームを含め、このセクションのアンカーを div id="contact" として指定しました。

任意のページで連絡先ボタンをクリックすると、ホームページに移動し、ページの読み込み時に連絡先フォームに自動的にスクロールします。

ここで見つけた同様の質問を確認した後、これを機能させることに失敗しました: jQuery scroll to ID from different page 試してみると、フォームにジャンプするだけです。スムーズにスクロールしたい。

<li><span>Get in touch</span><a href="index.html#contact">Contact</a></li>

他のページからホームページの連絡先アンカーにスクロールする問題の jquery 関数:

(function($){
    var jump=function(e) {
        if (e) {
            e.preventDefault();
            var target = $(this).attr("href");
        } else {
            var target = location.hash;
        }

        $('html,body').animate({
            scrollTop: $(target).offset().top
        },1000,function() {
            location.hash = target;
        });
    }

    $('html, body').hide()

    $(document).ready(function() {
        $('a[href^=#]').bind("click", jump);

    if (location.hash) {
        setTimeout(function(){
            $('html, body').scrollTop(0).show()
            jump()
        }, 0);
    } else {
      $('html, body').show()
    }
});

私はこの例に似た何かを達成しようとしています: http://vostrel.cz/so/9652944/page.html 違いは、この場合、両方のページに表示される「アンカー ID」の代わりに、アンカー ID (連絡先) は 1 つのページ (ホーム) にのみ表示されます。

4

3 に答える 3

1

これを試してみてください。スクリプトは最後の行が欠けているだけで問題ありません

 (function ($) {

     var jump = function (e) {
         if (e) {

             e.preventDefault();
             var target = $(this).attr("href");

         } else {

             var target = location.hash;

         }
         $('html,body').animate({

             scrollTop: $(target).offset().top

         }, 1000, function () {

             location.hash = target;

         });
     }

     $('html, body').hide();

     $(document).ready(function () {
         $('a[href^=#]').bind("click", jump);

         if (location.hash) {
             setTimeout(function () {

                 $('html, body').scrollTop(0).show()
                 jump();

             }, 0);
         } else {

             $('html, body').show();

         }
     });
 })(jQuery)
于 2015-02-11T21:29:46.523 に答える
0

コードのテスト中に出くわした小さなヒント:

アンカー タグの href 属性を使用しているため、jQuery が ID として解釈する #contact として表示されます。

アンカーを機能させるには、アンカーが表示されているページに関係なく、アンカーに id="contact" を追加する必要があります。

于 2012-12-11T09:16:20.767 に答える
0

あなたのコードが何であるかはわかりませんが、動作させることができました。1 つのことは、投稿したコード})(jQuery)の末尾に a がないことです。とにかく、私がここで何をしたかをチェックしてください。あなたが探しているものだと思います。あなたのウェブサイトの HTML がどのようなものかわかりませんが、適応できると思います。連絡先ボタンの href 属性を に設定するだけですindex.html#contact。index.html では、 を使用するだけ#contactで同じことができます。

index.html のヘッダー:

<div id="header">
    <a href="index.html">Homepage</a>
    <a href="otherpage.html">Other page</a>
    <a href="otherpage2.html">Another Page</a>
    <a href="#contact">Contact</a>
</div>

しかし、他のページでは：

<div id="header">
    <a href="index.html">Homepage</a>
    <a href="otherpage.html">Other page</a>
    <a href="otherpage2.html">Another Page</a>
    <a href="index.html#contact">Contact</a>
</div>

index.html のヘッダーを削除するindex.htmlと、ページが 2 回読み込まれるのを防ぐことができるため、jQuery は単にページを下にスクロールします。

于 2012-08-05T21:42:35.663 に答える