現在レスポンシブに対応したシングルぺージレイアウトのサイトを制作しています。
jqueryのskrollrを利用してスクロールすると背景の色が変化するようにし、ページ内リンクにanimate関数を用いて各セクションの頭にスクロールするようしました。
PCの方は問題なく作動するのですが、スマホでテストするとページ内リンクから各セクションの頭にスクロールするのですが背景の色が変化しない、各セクションの頭に移動した後、画面が上にスクロールしなくなります(chromeでテストすると上にスクロールしようとするたび更新されてしまいます)
どうすれば正常に作動するか教えていただけないでしょうか。
/一部コード/
<div id="skrollr-body"> <div class="back" data-0="background-color:rgb(26,26,26);" data-1000="background-color:rgb(148,145,180);" data-2000="background-color:rgb(137,189,222);" data-3000="background-color:rgb(252,183,80);"> <sction class="top">top <a class="btn" href=".middle">middle</a> </section> <section class="middle">middle /*内容*/ </section> <section class="bottom">bottom /*内容*/ </section> </div>/*back_end*/ </div>/*skroll-body_end*//middleにスクロール/
$(function(){
$('.btn').click(function(){
$('html,body').animate({scrollTop: 1000}, 400, 'swing');
});
});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/29 13:43