回答編集履歴

6

修正版追加

2019/07/30 21:15

投稿

yukikp
yukikp

score0

test CHANGED
@@ -40,7 +40,9 @@
40
40
 
41
41
  //ロード時の処理を待ち、時間差でスクロール実行
42
42
 
43
+ //このやり方だとscroll_toはhashではないので、scroll_toに#がついていないのをすっかり忘れてたので修正
44
+
43
- scrollToAnker(scroll_to);
45
+ scrollToAnker('#' + scroll_to);
44
46
 
45
47
  }, 100);
46
48
 

5

修正しました

2019/07/30 03:07

投稿

yukikp
yukikp

score0

test CHANGED
@@ -38,13 +38,13 @@
38
38
 
39
39
  setTimeout(function () {
40
40
 
41
- //ロード時の処理を待ち、時間差でスクロール実行
41
+ //ロード時の処理を待ち、時間差でスクロール実行
42
42
 
43
- scrollToAnker(scroll_to) ;
43
+ scrollToAnker(scroll_to);
44
44
 
45
45
  }, 100);
46
46
 
47
- }
47
+ }
48
48
 
49
49
 
50
50
 
@@ -52,7 +52,7 @@
52
52
 
53
53
  // 指定したアンカー(#ID)へアニメーションでスクロール
54
54
 
55
- function scrollToAnker(hash) {
55
+ function scrollToAnker(hash) {
56
56
 
57
57
  var target = $(hash);
58
58
 
@@ -60,9 +60,9 @@
60
60
 
61
61
  $('body,html').stop().animate({scrollTop:position}, 500);
62
62
 
63
- }
63
+ }
64
64
 
65
- })
65
+
66
66
 
67
67
  ```
68
68
 

4

書き方修正

2019/07/29 23:20

投稿

yukikp
yukikp

score0

test CHANGED
@@ -26,15 +26,43 @@
26
26
 
27
27
  var scroll_to = getParam( 'scrollto',location.href);
28
28
 
29
- if( undefined !== scroll_to ){
30
29
 
31
- window.location.hash = scroll_to;
32
30
 
31
+ //以下、https://qiita.com/Garyuten/items/0454a14cbda320882997のコピペ。
32
+
33
+ if(scroll_to) {
34
+
35
+ //スクロールを0に戻す
36
+
37
+ $('body,html').stop().scrollTop(0);
38
+
39
+ setTimeout(function () {
40
+
41
+ //ロード時の処理を待ち、時間差でスクロール実行
42
+
43
+ scrollToAnker(scroll_to) ;
44
+
45
+ }, 100);
46
+
33
- }
47
+ }
34
48
 
35
49
 
36
50
 
51
+ // 関数:スムーススクロール
52
+
53
+ // 指定したアンカー(#ID)へアニメーションでスクロール
54
+
55
+ function scrollToAnker(hash) {
56
+
57
+ var target = $(hash);
58
+
59
+ var position = target.offset().top;
60
+
37
- //移動先となる場所に、<div id="hogehoge"></div>のように、移動させたい要素にid属性でhogehogeを付け加えておけばOK
61
+ $('body,html').stop().animate({scrollTop:position}, 500);
62
+
63
+ }
64
+
65
+ })
38
66
 
39
67
  ```
40
68
 

3

スクロール機能をコピペしてきました

2019/07/29 23:18

投稿

yukikp
yukikp

score0

test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  var scroll_to = getParam( 'scrollto',location.href);
28
28
 
29
- if( undefined === scroll_to ){
29
+ if( undefined !== scroll_to ){
30
30
 
31
31
  window.location.hash = scroll_to;
32
32
 

2

ミス。。。orz

2019/07/29 23:13

投稿

yukikp
yukikp

score0

test CHANGED
@@ -7,3 +7,35 @@
7
7
 
8
8
 
9
9
  こっちの方法を使っておけば、#の方はページ内スクロールの方に使えるよ。
10
+
11
+
12
+
13
+ 追記:
14
+
15
+ > mixitup自体はできれば改変せず、
16
+
17
+
18
+
19
+ というのは、「mixitupのjs自体を改変せずに」ではなく、「mixitupを呼び出しているjsを変更させずに」という意味でしょうか?
20
+
21
+
22
+
23
+ それならば、リクエストパラメータとして?scrollto=hogehogeと入れておき、
24
+
25
+ ```JavaScript
26
+
27
+ var scroll_to = getParam( 'scrollto',location.href);
28
+
29
+ if( undefined === scroll_to ){
30
+
31
+ window.location.hash = scroll_to;
32
+
33
+ }
34
+
35
+
36
+
37
+ //移動先となる場所に、<div id="hogehoge"></div>のように、移動させたい要素にid属性でhogehogeを付け加えておけばOK
38
+
39
+ ```
40
+
41
+ でどうでしょう?

1

追記

2019/07/29 23:10

投稿

yukikp
yukikp

score0

test CHANGED
@@ -7,119 +7,3 @@
7
7
 
8
8
 
9
9
  こっちの方法を使っておけば、#の方はページ内スクロールの方に使えるよ。
10
-
11
-
12
-
13
- 修正版:
14
-
15
- こんな感じかな?
16
-
17
- ※mixitupの書き方が分からなければ、公式サイトを読んでみてください。
18
-
19
-
20
-
21
- http://hogehoge.com/?filter=thiscat#scrollto
22
-
23
-
24
-
25
- ```JavaScript
26
-
27
- var filter_data = '';
28
-
29
- filter_data = getParam( 'filter', location.href );
30
-
31
-
32
-
33
- var mixerOne = mixitup('#js-MixItUpContainer', {
34
-
35
- controls: {
36
-
37
- scope: 'local'
38
-
39
- ,
40
-
41
- classNames: {
42
-
43
- block: 'CategoryBlock',
44
-
45
- elementFilter:'CategoryBlock__item'
46
-
47
- },
48
-
49
- selectors: {
50
-
51
- target: '.Product__item'
52
-
53
- },
54
-
55
- load: {
56
-
57
- filter: filter_data
58
-
59
- }
60
-
61
- });
62
-
63
- ```
64
-
65
-
66
-
67
-
68
-
69
- 追記:
70
-
71
- > mixitup自体はできれば改変せず、
72
-
73
-
74
-
75
- というのは、「mixitupのjs自体を改変せずに」ではなく、「mixitupを呼び出しているjsを変更させずに」という意味でしょうか?
76
-
77
-
78
-
79
- それならば、リクエストパラメータとして?scrollto=hogehogeと入れておき、
80
-
81
- ```JavaScript
82
-
83
- var scroll_to = getParam( 'scrollto',location.href);
84
-
85
-
86
-
87
- //以下、https://qiita.com/Garyuten/items/0454a14cbda320882997のコピペ。
88
-
89
- if(scroll_to) {
90
-
91
- //スクロールを0に戻す
92
-
93
- $('body,html').stop().scrollTop(0);
94
-
95
- setTimeout(function () {
96
-
97
- //ロード時の処理を待ち、時間差でスクロール実行
98
-
99
- //このやり方だとscroll_toはhashではないので、scroll_toに#がついていないのをすっかり忘れてたので修正
100
-
101
- scrollToAnker('#' + scroll_to);
102
-
103
- }, 100);
104
-
105
- }
106
-
107
-
108
-
109
- // 関数:スムーススクロール
110
-
111
- // 指定したアンカー(#ID)へアニメーションでスクロール
112
-
113
- function scrollToAnker(hash) {
114
-
115
- var target = $(hash);
116
-
117
- var position = target.offset().top;
118
-
119
- $('body,html').stop().animate({scrollTop:position}, 500);
120
-
121
- }
122
-
123
-
124
-
125
- ```