teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問AndroidのみscrollTopが動かない

編集履歴

質問編集履歴

7

参照イシュー追記

2017/03/22 04:01

投稿

hibikikudo
hibikikudo

スコア238

title CHANGED
@@ -1,1 +1,1 @@
1
- 同一ページ中アンカーへのscrollがAndroidのみ動かない
1
+ AndroidのみscrollTopが動かない
body CHANGED
@@ -3,7 +3,8 @@
3
3
  [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/3/)
4
4
 
5
5
  ###発生している問題・エラーメッセージ
6
- PCブラウザ、iOSでは狙い通り動いてくれるのですが、Androidでのみ発火してくれません。
6
+ PCブラウザ、iOSでは狙い通り動いてくれるのですが、AndroidでのみscrollTopが発火してくれません。
7
+ 参照：[https://code.google.com/p/android/issues/detail?id=19625](https://code.google.com/p/android/issues/detail?id=19625)
7
8
 
8
9
  ###該当のソースコード
9
10
  ```html

6

コード二つ目別に

2017/03/22 04:01

投稿

hibikikudo
hibikikudo

スコア238

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ###前提・実現したいこと
2
2
  jQueryで、aタグをクリックした際に同一ページ中のアンカー（ハッシュ / #）にスクロールさせる機能（Scrollspy）を実装しようとしています。
3
- [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/4/)
3
+ [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/3/)
4
4
 
5
5
  ###発生している問題・エラーメッセージ
6
6
  PCブラウザ、iOSでは狙い通り動いてくれるのですが、Androidでのみ発火してくれません。
@@ -37,7 +37,7 @@
37
37
  2. bodyとhtmlをブラウザごとに厳密に区別
38
38
  3. .animate実行前に.css('overflow', 'hidden')、実行後に.css('overflow', 'hidden')追記
39
39
  これでもまだ動きません。
40
- 修正後コード
40
+ 修正後コード [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/4/)
41
41
  ```javascript
42
42
  var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
43
43
  $('a[href^="#"]').on('click', function(e) {

5

overflow追記

2017/03/22 03:56

投稿

hibikikudo
hibikikudo

スコア238

title CHANGED
File without changes
body CHANGED
@@ -35,6 +35,7 @@
35
35
  ### 試してみたこと
36
36
  1. setTimeout追記
37
37
  2. bodyとhtmlをブラウザごとに厳密に区別
38
+ 3. .animate実行前に.css('overflow', 'hidden')、実行後に.css('overflow', 'hidden')追記
38
39
  これでもまだ動きません。
39
40
  修正後コード
40
41
  ```javascript

4

リンクに修正後コード

2017/03/22 03:55

投稿

hibikikudo
hibikikudo

スコア238

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ###前提・実現したいこと
2
2
  jQueryで、aタグをクリックした際に同一ページ中のアンカー（ハッシュ / #）にスクロールさせる機能（Scrollspy）を実装しようとしています。
3
- [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/3/)
3
+ [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/4/)
4
4
 
5
5
  ###発生している問題・エラーメッセージ
6
6
  PCブラウザ、iOSでは狙い通り動いてくれるのですが、Androidでのみ発火してくれません。

3

試したこと追記

2017/03/22 03:44

投稿

hibikikudo
hibikikudo

スコア238

title CHANGED
File without changes
body CHANGED
@@ -32,4 +32,26 @@
32
32
  ###補足情報(言語/FW/ツール等のバージョンなど)
33
33
  jQuery v3.2.1
34
34
 
35
+ ### 試してみたこと
36
+ 1. setTimeout追記
37
+ 2. bodyとhtmlをブラウザごとに厳密に区別
38
+ これでもまだ動きません。
39
+ 修正後コード
40
+ ```javascript
41
+ var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
42
+ $('a[href^="#"]').on('click', function(e) {
43
+ e.preventDefault();
44
+ var speed = 600;
45
+ var href = $(this).attr('href');
46
+ var target = $(href == "#" || href == "" ? 'html' : href);
47
+ var headerHeight = 85;
48
+ var position = target.get(0).offsetTop - headerHeight;
49
+ setTimeout(function() {
50
+ $(scrollTag).css('overflow', 'hidden').animate({
51
+ scrollTop: position
52
+ }, speed).css('overflow', 'auto');
53
+ }, 50);
54
+ });
55
+ ```
56
+
35
57
  何卒よろしくお願いいたします。

2

イージングの記述除去

2017/03/22 03:42

投稿

hibikikudo
hibikikudo

スコア238

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ###前提・実現したいこと
2
2
  jQueryで、aタグをクリックした際に同一ページ中のアンカー（ハッシュ / #）にスクロールさせる機能（Scrollspy）を実装しようとしています。
3
- [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/2/)
3
+ [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/3/)
4
4
 
5
5
  ###発生している問題・エラーメッセージ
6
6
  PCブラウザ、iOSでは狙い通り動いてくれるのですが、Androidでのみ発火してくれません。
@@ -24,7 +24,7 @@
24
24
  var position = target.get(0).offsetTop - headerHeight;
25
25
  $('body, html').animate({
26
26
  scrollTop: position
27
- }, speed, 'easeInOutQuart');
27
+ }, speed);
28
28
  });
29
29
  });
30
30
  ```

1

リンク先JSを修正

2017/03/22 03:23

投稿

hibikikudo
hibikikudo

スコア238

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ###前提・実現したいこと
2
2
  jQueryで、aタグをクリックした際に同一ページ中のアンカー（ハッシュ / #）にスクロールさせる機能（Scrollspy）を実装しようとしています。
3
- [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/1/)
3
+ [JSFiddleサンプル](https://jsfiddle.net/r64jf6Lp/2/)
4
4
 
5
5
  ###発生している問題・エラーメッセージ
6
6
  PCブラウザ、iOSでは狙い通り動いてくれるのですが、Androidでのみ発火してくれません。
@@ -14,7 +14,7 @@
14
14
  <div id="anchor">Here!</div>
15
15
  ```
16
16
  ```javascript
17
- function() {
17
+ $(function() {
18
18
  $('a[href^="#"]').on('click', function(e) {
19
19
  e.preventDefault();
20
20
  var speed = 600;