###前提・実現したいこと
jQueryで、aタグをクリックした際に同一ページ中のアンカー(ハッシュ / #)にスクロールさせる機能(Scrollspy)を実装しようとしています。
JSFiddleサンプル
###発生している問題・エラーメッセージ
PCブラウザ、iOSでは狙い通り動いてくれるのですが、AndroidでのみscrollTopが発火してくれません。
参照:https://code.google.com/p/android/issues/detail?id=19625
###該当のソースコード
html
1<a href="#anchor">Scroll to Anchor</a> 2. 3. 4. 5<div id="anchor">Here!</div>
javascript
1$(function() { 2 $('a[href^="#"]').on('click', function(e) { 3 e.preventDefault(); 4 var speed = 600; 5 var href = $(this).attr('href'); 6 var target = $(href == "#" || href == "" ? 'html' : href); 7 var headerHeight = 85; 8 var position = target.get(0).offsetTop - headerHeight; 9 $('body, html').animate({ 10 scrollTop: position 11 }, speed); 12 }); 13});
###補足情報(言語/FW/ツール等のバージョンなど)
jQuery v3.2.1
試してみたこと
- setTimeout追記
- bodyとhtmlをブラウザごとに厳密に区別
- .animate実行前に.css('overflow', 'hidden')、実行後に.css('overflow', 'hidden')追記
これでもまだ動きません。
修正後コード JSFiddleサンプル
javascript
1var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html'; 2$('a[href^="#"]').on('click', function(e) { 3 e.preventDefault(); 4 var speed = 600; 5 var href = $(this).attr('href'); 6 var target = $(href == "#" || href == "" ? 'html' : href); 7 var headerHeight = 85; 8 var position = target.get(0).offsetTop - headerHeight; 9 setTimeout(function() { 10 $(scrollTag).css('overflow', 'hidden').animate({ 11 scrollTop: position 12 }, speed).css('overflow', 'auto'); 13 }, 50); 14 });
何卒よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。