web-dev-qa-db-ja.com

別のページからIDへのjQueryスクロール

一部のページ内でjQueryのページスクロールを使用しようとしていたため、スムーズなページスクロールを正常に行うことができました。私が今抱えている唯一の問題は、別のページからそれをしようとするときです。つまり、ページ内のリンクをクリックすると、新しいページが読み込まれ、特定のdiv要素までスクロールするはずです。

ページ内のスクロールに使用したコードは次のとおりです。

var jump=function(e)
{
       //prevent the "normal" behaviour which would be a "hard" jump
       e.preventDefault();
   //Get the target
   var target = $(this).attr("href");
   //perform animated scrolling
   $('html,body').animate(
   {
           //get top-position of target-element and set it as scroll target
           scrollTop: $(target).offset().top
   //scrolldelay: 2 seconds
   },2000,function()
   {
           //attach the hash (#jumptarget) to the pageurl
           location.hash = target;
   });

}

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

アイデアが明確であることを願っています。

ありがとう

非常に重要な注意：上記のコードは同じページ内でうまく機能しますが、私が望んでいるのは、あるページからリンクをクリックして別のページに移動し、ターゲットまでスクロールすることです。私はそれが今明確であることを望みます。ありがとう

jqueryscrollsmooth-scrolling
47
Digital site

基本的にこれを行う必要があります：

  • 他のページを指すリンクにターゲットハッシュを含めます（_href="other_page.html#section"_）
  • readyハンドラーで、通常ハッシュによって指示されたハードジャンプスクロールをクリアし、できるだけ早くページをトップにスクロールしてjump()を呼び出します。これは非同期で行う必要があります。
  • jump()で、イベントが指定されていない場合、_location.hash_をターゲットにします
  • また、この手法は時間内にジャンプをキャッチしない可能性があるため、すぐに_html,body_を非表示にし、スクロールしてゼロに戻すと表示し直します

これは上記を追加したコードです：

_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
   },2000,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();
    }
});
_

Chrome/Safari、Firefox、Operaでの動作確認済み。 Dunno about IEしかし。

63
Petr Vostrel

リンクにハッシュを入れます：

<a href="otherpage.html#elementID">Jump</a>

他のページでは、次のことができます。

$('html,body').animate({
  scrollTop: $(window.location.hash).offset().top
});

他のページでは、スクロールするelementIDに設定されたidを持つ要素が必要です。もちろん、名前を変更できます。

21
Sarfraz

PetrとSarfrazの回答を組み合わせて、私は次のことに到達しました。

Page1.htmlで：

<a href="page2.html#elementID">Jump</a>

Page2.htmlで：

<script type="text/javascript">
    $(document).ready(function() {
        $('html, body').hide();

        if (window.location.hash) {
            setTimeout(function() {
                $('html, body').scrollTop(0).show();
                $('html, body').animate({
                    scrollTop: $(window.location.hash).offset().top
                    }, 1000)
            }, 0);
        }
        else {
            $('html, body').show();
        }
    });
</script>
9
zanetu

ScrollToプラグインの使用をお勧めします

http://demos.flesler.com/jquery/scrollTo/

Jquery cssセレクターによってscrolltoを設定できます。

_$('html,body').scrollTo( $(target), 800 );
_

私はこのプラグインとそのメソッドの精度に大きな幸運がありました。.offset()や.position()を使用するような同じ効果を達成する他の方法は、過去。あなたがそのような方法を使用できないと言っているのではなく、私はそれをクロスブラウザで行う方法があると確信しています、私はscrollToがより信頼できるとちょうど見つけました。

6
Fresheyeball

これを行うことができる再利用可能なプラグインを作成しました...プラグイン自体の外部のイベントへのバインディングを残しました。

_jQuery(function ($) {

    /**
     * This small plugin will scrollTo a target, smoothly
     *
     * First argument = time to scroll to the target
     * Second argument = set the hash in the current url yes or no
     */
    $.fn.smoothScroll = function(t, setHash) {
        // Set time to t variable to if undefined 500 for 500ms transition
        t = t || 500;
        setHash = (typeof setHash == 'undefined') ? true : setHash;

        // Return this as a proper jQuery plugin should
        return this.each(function() {
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, t);

            // Lets set the hash to the current ID since if an event was prevented this doesn't get done
            if (this.id && setHash) {
                window.location.hash = this.id;
            }
        });
    };

});
_

次に、これをオンロードしてハッシュをチェックし、ハッシュがある場合はそれをjQueryのセレクターとして直接使用しようとします。今はこれを簡単にテストすることはできませんでしたが、少し前に実稼働サイト用に同様のものを作成しました。これがすぐに機能しない場合はお知らせください。そこで得られたソリューションを調べます。

（スクリプトはonloadセクション内にある必要があります）

_if (window.location.hash) {
    window.scrollTo(0,0);
    $(window.location.hash).smoothScroll();
}
_

次に、href属性にハッシュのみを含むアンカーのonclickにプラグインをバインドします。

（スクリプトはonloadセクション内にある必要があります）

_$('a[href^="#"]').click(function(e) {
    e.preventDefault();

    $($(this).attr('href')).smoothScroll();
});
_

マッチ自体が失敗した場合、jQueryは何もしないので、ページ上のターゲットが見つからない場合のニースフォールバックがあります。

更新

ハッシュのみがある場合に上部にスクロールする代替のonclickハンドラー：

_$('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');

    // In this case we have only a hash, so maybe we want to scroll to the top of the page?
    if(href.length === 1) { href = 'body' }

    $(href).smoothScroll();
});
_

また、ページ内のスクロールを示す単純なjsfiddleもあります。onloadの設定は少し難しいです...

http://jsfiddle.net/sg3s/bZnWN/

更新2

そのため、ウィンドウが要素onloadに既にスクロールしていると問題が発生する可能性があります。これにより、以下が修正されます。window.scrollTo(0,0);これは、ページを左上にスクロールするだけです。上記のコードスニペットに追加しました。

2
sg3s
function scroll_down(){
    $.noConflict();
    jQuery(document).ready(function($) {
        $('html, body').animate({
            scrollTop : $("#bottom").offset().top
        }, 1);
    });
    return false;
}

ここで、「bottom」は、スクロール先のdivタグIDです。アニメーション効果を変更するには、時間を「1」から別の値に変更できます

2
user1284907

クリックしたアンカーがページに含まれているかどうかを検出し、そうでない場合は通常のページに移動し、そうでない場合は特定のセクションにスクロールするものを作成しました。

$('a[href*=\\#]').on('click',function(e) {

    var target = this.hash;
    var $target = $(target);
    console.log(targetname);
    var targetname = target.slice(1, target.length);

    if(document.getElementById(targetname) != null) {
         e.preventDefault();
    }
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-120 //or the height of your fixed navigation 

    }, 900, 'swing', function () {
        window.location.hash = target;
  });
});
0
John-Henry