2017-04-20 16 views
1

ユーザーインタラクションなしで、ある要素から次の要素への連続ループでスクロールするWebページを作成しようとしています。私は検索し、scrollToElementは私が探しているものです(実際にはthis answer on another postのフィドルは似ていますが、ユーザーとのやりとりがあります)。残念ながら、すべてがクリックによって行われるように見えるか、ループしません。私はJSにはかなり新しいですが、それは実行可能でなければならないと感じています。どんな助けもありがとうございます。scrollToElementに対するユーザーの操作がありません

+0

あなたがしようとした私たちにあなたが何をしようとしての詳細を与えてきた何のマークアップを含めることはできますか?あなたはちょうどいくつかの要素にスクロールし、ループバックし、無限に何を繰り返すか? –

+0

はい、私はちょうど、ページを読み込んで、ある要素からページを下にスクロールし、次に上にスクロールして、もう一度やり直すように設定された間隔を持つようにしています。これまでのところどこから始めたらいいかわからないので、あまり試していない。本当に、私は直接コードを探しているのではなく、どこから始めるべきかの指針です。 – Acedrew

答えて

1

ここでは、setInterval()$.animate()を使ってセクションにスクロールするjQueryの簡単な例です。

var $sections = $('section'), 
 
    count = 1, 
 
    speed = 250, 
 
    delay = 2000; 
 

 
var interval = setInterval(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: $sections.eq(count).offset().top 
 
    }, speed); 
 
    count = (count + 1) % $sections.length; 
 
}, delay)
section { 
 
    height: 200vh; 
 
    background: red; 
 
} 
 
section:nth-child(2) { 
 
    background: blue; 
 
} 
 
section:nth-child(3) { 
 
    background: green; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section></section> 
 
<section></section> 
 
<section></section>

+0

ありがとうございます!魅力的な作品! – Acedrew

+0

@Acerew No sweat! –

2

scrollToElementを呼び出して、setInterval()でCB関数として設定する関数を作成する方法について説明します。もっと読む:MDN

+0

私はsetInterval()を指してくれてありがとう。私は循環させたい各要素のIDを含む配列に設定できますか? – Acedrew

関連する問題