2016-08-03 5 views
0

次のようなURLを使用すると、Djangoアプリケーション内のページの読み込み時に関連するdivに直接ジャンプすることができます。Djangoが直接divにジャンプします

mysite.mydomain /よくある質問#faq9-1

ここではよくある質問の一つの例です:単純に関連するURLをロードすることは何もしません、もちろん

<div class="panel-group" id="faq-9"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#faq9-1"> 
        9.1 FAQ Title here. 
       </a> 
      </h4> 
     </div> 
     <div id="faq9-1" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Body of FAQ here. 
      </div> 
     </div> 
    </div> 

、およびhref="#faq9-1"の交換および/またはid="faq9-1"name="faq9-1"はこれを変更しません。しかし、

<script type="application/javascript"> 
$(document).ready(function() { 
    var faq = window.location.href.split('#')[1]; 
    if (faq) { 
     console.log("Got FAQ: " + faq); 
     if(faq.match(/^faq/)) { 
      $('html, body').animate({ 
       scrollTop: $("#" + faq).offset().top 
      }, 2000); 
     } 
    } 
}); 
</script> 

...まだ何も:だから、私は思ったかもしれないいくつかのjqueryのは、トリックを行う可能性があります。私はコンソールウィンドウからジャンプを引き起こす何も得られない。

https://github.com/flesler/jquery.scrollTo

を...と、プラグインおよびコンソールから、上記の方法の両方を試してみました:私はまた、このプラグインを試してみました。まだ何も。おそらく私は何かが分からないので、何か提案を歓迎するでしょう。

答えて

0

です。最終的には、次の手段でこれを動作させることができます。まず、別のIDパラメータ追加することで:

<a data-toggle="collapse" data-parent="#accordion" href="#faq1-2" id="faq1_2"> 
トップに関連するセクションを移動、固定、それはその後、ビューを展開するためにも、バナーの下から見るのセクションを移動し、ためにいくつかのJavaScriptを必要と

$(window).load(function() { 
     if (window.location.hash) { 
      var faq = window.location.href.split('#')[1]; 
      var tbody = faq.replace(/_/,'-'); 
      $('#' + tbody).addClass("in"); 
      window.scrollBy(0,-160); 
     } 

    }); 
1

あなたのhtmlのすべてを見ることはできませんが、ページがスクロールしないと(ページ内にスクロールバーが必要な情報がないため)ページがジャンプしないどこにもジャンプできません。

これを行うにはjQueryは必要ありません。あなたのコードは<a href="#faq9-1"></a>であり、divは<div id="faq9-1">

+0

ページに十分なFAQがあり、下のものを見るためにスクロールする必要があります。確かに、私はこれがjqueryなしでもできると思っていただろうが、それはそうではないようだ。 – knirirr

関連する問題