JQueryスクロールウィンドウの位置に応じてdivを表示する

Question

ボタンをクリックすると、新しいdivが追加されます。 divのいずれかの部分がウィンドウに表示されない場合は、それが表示されるまでスクロールしてください。

ウィンドウの中央から上に向いている場合は上になるまで上にスクロールし、下になる場合は下にスクロールします。私searchingsで

私はhttps://api.jquery.com/scrollTop/を見つけたが、それは私だけので、トップ

Answer 1

thisをチェックして解決してください。

scrollTop()を使用すると、divにスクロールできます。まず、scrollTop()関数の値を正しく提供するスクロールの方向を見つける必要があります。これはposition()を使用して見つけることができます。また

$('#button4').click(function() { 
    // check if the div lies below the button 
    if ($('#div3').position().top - $('#button4').position().top > 0) { 
     // in this case we need to add shift 
     var shift = $(window).height() - $('#div3').height(); 
    } else { 
     var shift = 0; 
    } 
    $(window).scrollTop($('#div3').offset().top - shift); 
    }); 

---

あなたは、現在のビューポート（または現在のウィンドウビューの中央）にdivの位置を確認したい場合は、次のようにgetBoundingClientRect()を使用することができます。

$('#button4').click(function() { 
    // check if the div lies below the viewport 
    if ($('#div3')[0].getBoundingClientRect().top > 0) { 
     // in this case we need to add shift 
     var shift = $(window).height() - $('#div3').height(); 
    } else { 
     var shift = 0; 
    } 
    $(window).scrollTop($('#div3').offset().top - shift); 
    }); 

Here代替のフィドルです。

Answer 2

に常にではない、画面に完全にそれを表示するのに十分なスクロールしたい私は

を説明しています何もしていないようですjQueryを使用している場合。

//scroll top of element 
    var $myNewElement = $(".new-element-class"); 
    $('html, body').scrollTop($myNewElement.offset().top) 

これはうまくいくと思います。 scrollTop関数を呼び出す前にdivが追加されていることを確認してください。

Answer 3

私が正しく理解している場合、このjsfiddleがあなたが探しているものです。

シンプルなアニメーションを追加して、ドキュメントがビューポートの周りを邪魔にならないようにしました。

特長

• 新しい要素が作成され、その新要素の一部は、現在のビューポートの下にあるビューポートの底部が示されるまで、文書がスクロールされます。新しい要素の一部が現在のビューポートの上にある場合は逆です。
• 新しい要素が現在のビューポート内に完全に表示されている場合、スクロールは行われません。
• すべてのスクロール効果がアニメーション化されています。ボタンをクリックすると、それは

  仕組み

（代わりに新しい要素の非常に端までスクロールするいくつかのパディングを残す）オフセット設定可能

、新しいdiv要素が追加されます。条件がある

if (isElementAboveViewport($('section > div:last-child'))) { 
    ... 
} 

場合：if文で

function isElementAboveViewport(element) { 
    return $(element).offset().top < $(window).scrollTop(); 
} 

：このdiv要素は、以下の機能を使用して、現在のビューポートの上にある場合

$('section').append('<div>');

次に、我々は把握します真実、私たちはスクロール！ （offsetは設定可能です - JSのフィドルでは、私は、ビューポートのトップ40ピクセルをカバーし、ボタンの高さである40を使用）、新たな要素が持つ現在のビューポートを下回った場合、我々はチェックし、今

$('html, body').animate({ 
    scrollTop: $('section > div:last-child').offset().top - offset 
}, 1000); 

同様の機能：

function isElementBelowViewport(element) { 
    return $(element).offset().top + $(element).height() > $(window).scrollTop() + $(window).height(); 
} 

要素がドキュメント内であまりにも下にある場合は、スクロールします。

$('html, body').animate({ 
    scrollTop: $('section > div:last-child').offset().top + $('section > div:last-child').height() - $(window).height() + offset 
}, 1000); 

（ここでも、offsetは設定可能です）、これはあなたが探していたおよび/またはあなたはそれがどのように機能するかについて質問がある場合は何である場合は私に知らせてください。