2012-08-05 18 views
6

私のホームページの一番下に、連絡先フォームを含めて、このセクションのアンカーをdiv id = "contact"と指定しました。別のページへのリンク - >特定のアンカーへのjqueryスクロール

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

私はここで見つけた同様の質問を検討した後、これをうまく動作させることに成功しませんでした: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ページ(自宅)にのみ表示されます。

答えて

0

私はあなたのコードが何であるか分かりませんが、私はそれを働かせることができました。 1つは、投稿したコードです。最後に})(jQuery)がありません。とにかく、私はhereのことを調べて、私はそれがあなたが探していると思います。あなたのウェブサイトの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を除去するように、二回ロードされてからページを防ぎjQueryは単にページを下にスクロールします。

あなたがアンカータグのhref属性を使用しているので、それは#contactとしてやってき、jQueryのIDとして解釈:あなたのコードをテストしながら、

0

リトル先端私が出会いました。

アンカーのページに関係なく、アンカーにID = "連絡先"を追加する必要があります。

1

最後の行だけが欠落しているスクリプトがOKで、これを試してみてください

(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) 
関連する問題