web-dev-qa-db-ja.com

jQuery：URLを呼び出すときにスクロールしてアンカーし、ブラウザーの動作を置き換えます

私はすでにjQueryプラグインScrollToを知っていますが、これまで次のことを実現する方法が見つかりませんでした。

ユーザーは私のサイトにアクセスします（私のページのリンクをクリックするのではなく、入力することによって）domain.com/bla.php#foo

アンカー「#foo」が存在します。ここで、ユーザーのブラウザが自動的に「#foo」にスクロールしないようにしたいのですが、代わりに、要素「#foo」がビューのほぼ中央にあり、絶対的な最上部の位置にないようにスムーズにスクロールしたいと思います。ユーザーが表示します。

これまでのところありがとう！

jqueryscrollanchorsmooth
14
bj.

実際のアンカーfooを作成せず、__foo_（_<a id="_foo">_など）のようなIDでアンカーを作成する場合。これを実現するために、$(document).readyを処理できます。

（擬似コード）のようなもの

_$(document).ready(function() { 
    var elem = $('#_' + window.location.hash.replace('#', ''));
    if(elem) {
         $.scrollTo(elem.left, elem.top);
    }
});
_
21
Jan Jongboom

Jan Jongboomのスクリプトを拡張したので、次のようになります。

$(document).ready(function () {
    // replace # with #_ in all links containing #
    $('a[href*=#]').each(function () {
        $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    });

    // scrollTo if #_ found
    hashname = window.location.hash.replace('#_', '');
    // find element to scroll to (<a name=""> or anything with particular id)
    elem = $('a[name="' + hashname + '"],#' + hashname);

    if(elem) {
         $(document).scrollTo(elem, 800);
    }

});

リンク内のすべてのアンカーが変更されるため、JavaScriptを使用していないユーザーの場合、動作は変更されません。

6
Viktor Stískala

Machineghostの答えはとても役に立ちました。一緒にパッチを適用したコードは、URLパラメータを取得してハッシュタグに変換し、DOMの準備が整うとすぐにブラウザがスクロールします。

URLは次のようになります。

www.mysite.com/hello/world.htm?page=contact

連絡先は、スクロール先のIDの名前です

<h1 id="contact">Contact Us</h1>

コードは次のとおりです。

// Get any params from the URL
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var url = decodeURIComponent(window.location.href);
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.Push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
 }
});

$(document).ready(function() {
    // Unhide the main content area
    $('section.centered').fadeIn('slow');

    // Create a var out of the URL param that we can scroll to
    var page = $.getUrlVar('page');
    var scrollElement = '#' + page;

    // Scroll down to the newly specified anchor point
    var destination = $(scrollElement).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
    return false;
});

これをChromeとFFでチェックしましたが、非常にうまく機能しました。スクロールターゲットが目的の場所に移動しない場合は、「destination-75」を調整してみてください。

上記の投稿なしではできなかったので、ありがとう！

1
ReLeaf
/* scrolling to element */
    var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed
    $('a').click(function(){
        var hashEle = $(this).attr('href').split('#');
        if (hashEle.length > 1) {
            if (hashEle[1] == 'top') {
                $('body, html').animate({
                    scrollTop: 0
                },500);
            } else {
            jQuery('body, html').animate({
                scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight
            },500);
            }
        };
    })
        // find element from url
hashname = window.location.hash.replace('#', '');
elem = $('#' + hashname);
if(hashname.length > 1) {
    if(hashname == 'top') {
    $('body, html').animate({
            scrollTop: 0
        },200); 
    } else {
     $('body, html').animate({
            scrollTop: $(elem).offset().top - headerHeight
        },500);
 }
};
/* END scrolling to element */

このスクリプトは$（document）.ready（function（）{}）;に入れる必要があります。

1
Emilion

ScrollToは引き続き使用できます。アンカーのないページをレンダリングしてから、ページの読み込み時に実行されるJavaScriptを使用して、URLからアンカーを取得することをお勧めします。次に、そのテキストを使用して特定のIDまでスクロールできます。

ページの中央でアイテムを取得する方法がわかりませんが、スクロールのオフセットを指定できます。

0
Chris Williams

これが不可能だとは言いたくありませんが...少なくともかなり難しいでしょう。ブラウザ（または少なくとも私が知っているすべてのブラウザ）は、ページのその部分が読み込まれるとすぐにアンカーポイントまでスクロールします。 AFAIKには、これを回避するJavascriptベースの方法はありません（ブラウザプラグインなどが必要です）。

ただし、「ページが完全に読み込まれるまでページを表示しない」スクリプトの変形を使用して、必要な動作を実現できる可能性があると思います。言い換えれば、次のようになります。

  1. ページのコンテンツのプリロードをすべて非表示にします（つまり、ページ全体をラップするDIVを用意し、それに「display：none」スタイルを設定します）

  2. DIVを再表示するページに「onLoad」イベントハンドラーをアタッチし、...

  3. 同じ「onLoad」イベントハンドラーで、標準のJSスクロールメカニズム（つまり、ScrollTo）を使用してアンカーまでスクロールします（window.locationを確認することで、スクロールするアンカーを決定できると思います）。

理論的には、ブラウザは＃1と＃2の間をブラウザでスクロールするため（スクロールする場所がないため、コンテンツが非表示になっていると、まったく何も起こらないと思います）、スクロールメカニズム＃3で使用するものは干渉しないはずです。

そうは言っても、上記のすべては完全にテストされていない計画です。あなたのマイレージはさまざまです。たとえそれが機能したとしても、実装するのは面倒なことになるので、本当にこの動作が必要でない限り、問題を起こす価値はほとんどありません。

0
machineghost