javascript - 要素 - 下 に スクロール jquery




要素へのjQueryのスクロール (18)

ユーザーが#subjectでその入力をクリックすると、ページは素敵なアニメーションでページの最後の要素にスクロールする必要があります。 下にスクロールし、上にはスクロールしないでください。

ページの最後の項目は、サブミットするサブミットボタンです。

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

これは最初に#submitまでスクロールし、クリックされた入力にカーソルを戻します。これはスクロールダウンを模倣し、ほとんどのブラウザで機能します。 また、純粋なJavaScriptで記述できるので、jQueryは必要ありません。

focus機能を使用するこの方法は、 focus呼び出しを連鎖させるfocusで、より良い方法でアニメーションを模倣できますか? 私はこの理論をテストしていませんが、次のようになります:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

私はこのinput要素を持っていinput

<input type="text" class="textfield" value="" id="subject" name="subject">

それから他のテキスト入力、テキストエリアなどの要素があります。

ユーザーが#subjectでそのinputをクリックすると、ページは素敵なアニメーションでページの最後の要素にスクロールする必要があります。 下にスクロールし、上にはスクロールしないでください。

ページの最後の項目は、 submitボタン#submitです。

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

アニメーションは速すぎるべきではなく、流動的でなければなりません。

私は最新のjQueryバージョンを実行しています。 私はプラグインをインストールするのではなく、これを実現するためにデフォルトのjQuery機能を使用する方が好きです。


"アニメート"ソリューションのコンパクトバージョン。

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

基本的な使い方: $('#your_element').scrollTo();


idボタン付きのボタンがあると仮定して、この例を試してみましょう:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

jQueryプラグインのない要素にスムーズにスクロールする記事のコードがあります 。 私は以下の例でそれをテストしました。

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


jQuery .scrollTo():

私はこの軽量なプラグインを書いて、ページ/要素のスクロールをはるかに簡単にしました。 ターゲット要素または指定された値を渡すことができる柔軟性があります。 おそらく、これはjQueryの次の公式リリースの一部であるかもしれませんが、どう思いますか?

使用例:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

オプション:

scrollTarget :目的のスクロール位置を示す要素、文字列、または数値。

offsetTop :スクロールターゲットの上に追加のスペーシングを定義する数値。

duration :アニメーションの実行時間を決定する文字列または数値。

easing :トランジションにどのイージング関数を使用するかを示す文字列。

complete :アニメーションが完了した後に呼び出す関数。


このソリューションでは、プラグインは必要ありません。クローズする前にスクリプトを置く以外にセットアップは必要ありません。 </body>タグ。

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

if ($(window.location.hash).length > 1) {
  $("html, body").animate({
    scrollTop: $(window.location.hash).offset().top
  }, 1000);
}

ロード時に、アドレスにハッシュがある場合は、そのアドレスにスクロールします。

#topなどのhrefハッシュを持つリンクをクリックするたびに、スクロールします。


$('html, body').animate(...)は私のiPhone、アンドロイドクロムサファリブラウザではありません。

私はページのルートコンテンツ要素をターゲットにしなければならなかった。

$( '#cotnent')。アニメーション(...)

ここに私が終わったことがあります

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

すべての本文コンテンツは#content divで結ばれています

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>


これは、ジェネリッククラスセレクタを使用してIDとhrefを抽象化した私のアプローチです

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>


それが価値あるものであれば、これはスクロールを使ってDIVの内部にある一般的な要素に対してこのような動作を実現する方法です。 私たちの場合、私たちは全身をスクロールしませんが、オーバーフローのある特定の要素:auto; より大きなレイアウトの中で。

ターゲット要素の高さの偽の入力を作成し、それにフォーカスを置くと、ブラウザーは、スクロール可能な階層内でどれほど深い位置にあっても、残りの部分を処理します。 魅力のように動作します。

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

ほとんどの場合、プラグインを使用することをお勧めします。 真剣に。 私はここで私のことを告げるつもりです 。 もちろん他にもあります。 しかし、プラグインが最初に必要な落とし穴を本当に避けているかどうかを確認してください。

私はelsewhereプラグインを使用する理由について書いていelsewhere 。 一言で言えば、ほとんどの答えを支えているライナーはここにあります

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

UXは悪いです。

  • アニメーションはユーザーの操作に応答しません。 ユーザーがスクロールしたり、タップしたり、スクロールしようとしても継続します。

  • アニメーションの開始点がターゲット要素に近い場合、アニメーションは非常に遅くなります。

  • ターゲット要素がページの下部に配置されている場合は、ウィンドウの上部にスクロールすることはできません。 スクロールアニメーションは途中で突然停止します。

これらの問題(およびelsewhere )を処理するために、私のプラグインjQuery.scrollableを使用することができます。 その後、呼び出しは

$( window ).scrollTo( targetPosition );

以上です。 もちろん、 もっと多くのオプションあります

目標位置に関しては、 $target.offset().topはほとんどの場合、ジョブを行います。 しかし、返された値はhtml要素の境界を考慮しないことに注意してください( このデモを参照 )。 どのような状況下でも目標位置が正確である必要がある場合は、

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

これはhtml要素のボーダーが設定されていても機能します。


スティーブとピーターによる解決策は非常にうまくいきます。

しかし場合によっては、値を整数に変換する必要があります。 不思議なことに、 $("...").offset().topから返される値は時々 floatます。
使用: parseInt($("....").offset().top)

例えば:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

モジュールscroll-element npm install scroll-elementを設定しました。 それはこのように動作します:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

次のような投稿の助けを借りて書かれています:

ここにコードです:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

入力要素へのスクロールだけを扱う場合は、 focus()使用できます。 たとえば、最初に表示されている入力までスクロールする場合は、次のようにします。

$(':input:visible').first().focus();

またはクラス.error持つコンテナの最初の可視入力:

$('.error :input:visible').first().focus();

これを指摘してくれたTricia Ballに感謝します!


円滑なスクロール効果にあまり興味がなく、特定の要素へのスクロールに興味がある場合は、このためにいくつかのjQuery関数は必要ありません。 Javascriptはあなたのケースをカバーしています:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

だからあなたがする必要があるのは、 $("selector").get(0).scrollIntoView();

.get(0)は、JQueryのDOM要素ではなく、JavaScriptのDOM要素を取得するために使用されます。


要素全体を表示するには(現在のウィンドウサイズで可能な場合):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

非常にシンプルで使いやすいカスタムjQueryプラグイン。 クリック可能な要素に属性scroll=を追加し、その値をスクロール先のセレクターに設定します。

同様に: <a scroll="#product">Click me</a> 。 どの要素でも使用できます。

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};






jquery