10

# アンカー リンクではなく絶対 URL を使用する場合に scrollspy を機能させようとしています。

たとえば、使用するだけで scrollspy を簡単に実行できます<a href="#section1"></a>

を使用してscrollspyを実行できるようにしたい<a href="http://myurl.com/#section1"></a>

これを行う理由は、ホームページのメイン ナビゲーションが scorllspy であるためですが、ブログはホームページの一部ではありません。ブログにアクセスしてからホームページ上の何かへのリンクをクリックするとhttp://myurl.com/blog/#section1、ホームページ ID ではなくにルーティングされます。

私はこの解決策を見つけました（bootstrap scrollspyでurlとhashを使用します）が、完全に機能させることができませんでした。いくつかの微調整と多数の正規表現の組み合わせの後、アクティブなクラスを最初のメニュー項目に追加することができましたが、更新されませんでした。

これを機能させることについて何か考えはありますか？使用する必要がある代替の js ライブラリはありますか?

トロイのおかげで解決

jQuery(function($){
  // local url of page (minus any hash, but including any potential query string)
  var url = location.href.replace(/#.*/,'');

  // Find all anchors
  $('.nav-main').find('a[href]').each(function(i,a){
    var $a = $(a);
    var href = $a.attr('href');

    // check is anchor href starts with page's URI
    if (href.indexOf(url+'#') == 0) {
      // remove URI from href
      href = href.replace(url,'');
      // update anchors HREF with new one
      $a.attr('href',href);
    }

    // Now refresh scrollspy
    $('[data-spy="scroll"]').each(function (i,spy) {
      var $spy = $(this).scrollspy('refresh')
    })
  });

  $('body').scrollspy({ target: '.nav-main', offset: 155 })

});

$('body').scrollspy({ target: '.nav-main', offset: 155 })scrollspyをリフレッシュした後にデータオフセットを再適用するために追加しました。試行錯誤の末、これが私が見つけた唯一の解決策です。

4

4 に答える 4

37

data-targetまたは、link 要素に属性を追加することもできます。data-target="#link"

<a href="http://www.site.ru/#link1" data-target="#link1">Link1</a>
<a href="http://www.site.ru/#link2" data-target="#link2">Link2</a>
于 2014-02-09T20:52:11.020 に答える
4

方法はコード化されており、 で始まる をscrollspy持つアンカーを調べます。 href#

これを行う方法が 1 つあります。きれいではありませんが、うまくいくかもしれません。

ページが読み込まれたら、jQuery の準備が整った関数で、すべてのアンカー (ターゲット コンテナーまたは本文内) のドキュメントを検索し、hrefがホスト名で始まり、その後に が続くかどうかを確認し/#、一致する場合はアンカーの変更を確認します。hrefの後の部分になるだけです#

これは、試すことができる大まかなコード（テストされていません）です（scrollspy ターゲットが id の div であるとします#navbar：

jQuery(function($){
  // local url of page (minus any hash, but including any potential query string)
  var url = location.href.replace(/#.*/,'');

  // Find all anchors
  $('#navbar').find('a[href]').each(function(i,a){
    var $a = $(a);
    var href = $a.attr('href');

    // check is anchor href starts with page's URI
    if (href.indexOf(url+'#') == 0) {
      // remove URI from href
      href = href.replace(url,'');
      // update anchors HREF with new one
      $a.attr('href',href);
    }

    // Now refresh scrollspy
    $('[data-spy="scroll"]').each(function (i,spy) {
       $(spy).scrollspy('refresh');
    });
  });

});

ファイルをロードした後、必ずこれを実行してください。bootstrap.min.js

data-* 属性ではなく、javascript を介して ScrollSpy を初期化する場合は、scrollspy がリフレッシュされる 3 行のコードを、scrollspyターゲットと設定を初期化するコードに置き換えます。

于 2014-01-15T00:57:54.583 に答える
0

これが、私と同じ状況に陥った人の助けになることを願っています。

ライブで見る:ライブ サンプル (WordPress、roots.io、および Bootstrap 3 で構築された Handyman Web サイト)

以下に、ホームページにない場合にのみ条件付きで実行することを示します。これにより、ホームページ上でのスクロール スパイ動作は変更されず、ホームページ以外のページからクリックされたときに、ホームページ上のそれぞれのセクションにリンクするようにリンクが変更されます。

これは私が思いついたものです（かなりよくテストされています）

必要に応じて jQuery/css セレクターを置き換えるだけです。

これは、スクロールスパイ、上記のソリューション、および少しスムーズなセクションスクロールアクションを使用している完全なスニペットです。

/**
 * Scroll Spy via Bootstrap
 */
$('body').scrollspy({target: "#nav_wrapper", offset:50});

/**
 * Scroll Spy meet WordPress menu.
 */
// Only fire when not on the homepage
if (window.location.pathname !== "/") {
    // Selector for top nav a elements
    $('#top_main_nav a').each( function() {
        if (this.hash.indexOf('#') === 0) {
            // Alert this to an absolute link (pointing to the correct section on the hompage)
            this.href = "/" + this.hash;
        }
    });
}

/**
 * Initiate Awesome Smooth Scrolling based on a.href
 */
$('a.smooth-scroll, #top_main_nav a').click( function() {
    target = $(this).attr('href');
    offset = $(target).offset();
    $('body,html').animate({ scrollTop : offset.top }, 700);
    event.preventDefault();
});

ここでライブを見る

于 2014-04-17T04:22:11.657 に答える