jQueryで開発をしています。
スムーズスクロールを作っているのですが、アニメーションがうまく効きません。
「作りたいもの」
・ウィンドウの右下に固定表示
・クリックするとページの上部にまでスムーズスクロール
・cssで透過
・スクロールするにつれてアニメーションで可視化
「jQuery 最高の教科書」を参考にしながら作っています。
スムーズスクロール自体は出来ても、透過から可視化へのアニメーションができません。
アドバイスをお願いします。
JavaScript
1jQuery(function(){ 2//スムーズスクロール 3 $('.back-to-top').each(function () { 4 var $el = $(scrollableElement('html', 'body')); 5 $(this).on('click', function (event) { 6 event.preventDefault(); 7 $el.animate({ scrollTop: 0 }, 250); 8 }) 9 .on('scroll', function(event){ 10 $(this).stop(true).animate({ 11 opacity: 1 12 }); 13 }); 14 }); 15 function scrollableElement (elements) { 16 var i, len, el, $el, scrollable; 17 for (i = 0, len = arguments.length; i < len; i++) { 18 el = arguments[i], 19 $el = $(el); 20 if ($el.scrollTop() > 0) { 21 return el; 22 } else { 23 $el.scrollTop(1); 24 scrollable = $el.scrollTop() > 0; 25 $el.scrollTop(0); 26 if (scrollable) { 27 return el; 28 } 29 } 30 } 31 return []; 32 } 33});
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/02 00:50
2017/04/02 03:25
2017/04/02 03:51
2017/04/02 04:40