teratail
回答率
85.47%
質問するログイン新規登録
トップCSS3に関する質問クリックして、サイト内リンクに移動後　後消えるボタンが作れないです

編集履歴

質問編集履歴

3

追記

2022/04/17 14:41

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,9 @@
38
38
  しかし、ボタンがスクロール終了後消えません。
39
39
 
40
40
  どのように記述すれば消えるのでしょうか？
41
+ ＊追記　
42
+ 指定した位置まで移動した後、さらにスクロールすると消えます。
43
+ スクロールが終わった直後にきえません。
41
44
 
42
45
 
43
46
  下記のサイトを参考にしました。
@@ -101,43 +104,6 @@
101
104
 
102
105
  スムーススクロールが動いているでjquery は動作していると思います。
103
106
 
104
- 追記
105
- [jQuery初心者】閉じるボタンをクリックすると、ゆっくり消える要素を作る | sinpe-Blog](https://sinpe-pgm.com/jquerry_addclass_close_btn/
106
- )
107
- こちらを試したところ、　クリックしたら消すことはできましたが、
108
- スクロールする前にすぐに消えてしまいました。
109
-
110
- ```ここに言語を入力
111
- // クリックすると非表示//
112
- $(function () {
113
- // .header-reserve-buttonをクリックすると
114
- $('.header-reserve-button').on('click', function () {
115
- // .header-reserve-buttonのクラスに.hiddenクラスを付加する
116
- $('.header-reserve-button').addClass('hidden');
117
- });
118
- });
119
-
120
- .header-reserve-button{
121
- width:244px;
122
- height:54px;
123
- background-color:#63B13C;
124
- color:#fff;
125
- font-size:1.5rem;
126
- text-align:center;
127
- border-radius:30px;
128
- padding:10px 50px;
129
- margin:43px 50px;
130
- }
131
-
132
- .header-reserve-button.hidden{
133
- opacity: 0;
134
- visibility: hidden;
135
- }
136
-
137
- <a href="#contact" class="header-reserve-button" target="_blank"
138
- >お問い合わせ</a
139
- ><!-- /.header-button -->
140
- ```
141
107
 
142
108
 
143
109
 
@@ -145,3 +111,4 @@
145
111
 
146
112
 
147
113
 
114
+
CSS3HTML5jQuery

2

追記

2022/04/17 14:33

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -9,12 +9,23 @@
9
9
  下記のコードを記述しました。
10
10
 
11
11
  ```ここに言語を入力
12
- // ボタンをクリックしたら発動
13
- $('header-reserve-button').click(function() {
12
+ $('.header-reserve-button').click(function(){
14
-
13
+ var speed = 500;
14
+ var href= $(this).attr("href");
15
+ var target = $(href == "#" || href == "" ? 'html' : href);
16
+ var position = target.offset().top;
17
+ $("html, body").animate({scrollTop:position}, speed, "swing");
18
+ return false;
19
+ });
20
+ var scrollend = $('#contact').offset().top ; //ページ上部からの距離を取得
21
+ var distance = 0;
22
+ $(document).scroll(function(){
23
+ distance = $(this).scrollTop(); //スクロールした距離を取得
15
- // ゆっくりフェードアウトさせる
24
+ if (scrollend <= distance) {
16
- $('header-reserve-button').fadeOut('slow');
25
+ $('.header-reserve-button').fadeOut();
17
-
26
+ } else{
27
+ $('.header-reserve-button').fadeIn();
28
+ }
18
29
  });
19
30
  ```
20
31
  ```ここに言語を入力
@@ -32,36 +43,59 @@
32
43
  下記のサイトを参考にしました。
33
44
 
34
45
 
35
- [ jQueryで簡単にフェードイン・フェードアウトをする方法 ](https://www.flatflag.nir87.com/fadein-1841 )
46
+ [ 特定の位置までスクロールしたら消える要素の実装方法 ](https://cocotsubu.com/2020/06/10/post-4686/ )
47
+
48
+ [デモ](https://cocotsubu.com/demo/demo16/demo01.html)
36
49
 
37
50
  ```ここに言語を入力
51
+ <div class="wrapper">
38
- <button>消す</button>
52
+ <div class="cont">
39
- <div>
40
- <p>ようこそ！</p>
53
+ <p>テキスト</p>
54
+ </div>
55
+ <div class="cont">
41
- <p>今回はフェードアウトのご紹介！</p>
56
+ <p>テキスト</p>
57
+ </div>
58
+ <div class="demo01__btn js-demo01-btn-area">
59
+ <a href="#demo01__area" class="demo01__link js-demo01-btn">ページ下部固定ボタン▼</a>
60
+ </div>
61
+ <div id="demo01__area" class="cont js-demo01-area">
42
- <p>誰でも簡単に実装できます。</p>
62
+ <p>ここで止まる</p>
63
+ </div>
64
+ <div class="cont">
65
+ <p>テキスト</p>
66
+ </div>
67
+ <div class="cont">
68
+ <p>テキスト</p>
69
+ </div>
70
+ <div class="cont">
71
+ <p>テキスト</p>
72
+ </div>
43
73
  </div>
44
74
 
45
- $(function() {
75
+ $(function(){
46
-
47
- // ボタンをクリックしたら発動
48
- $('button').click(function() {
76
+ $('.js-demo01-btn').click(function(){
49
-
77
+ var speed = 500;
78
+ var href= $(this).attr("href");
79
+ var target = $(href == "#" || href == "" ? 'html' : href);
80
+ var position = target.offset().top;
81
+ $("html, body").animate({scrollTop:position}, speed, "swing");
82
+ return false;
83
+ });
84
+ var scrollend = $('#demo01__area').offset().top ; //ページ上部からの距離を取得
85
+ var distance = 0;
86
+ $(document).scroll(function(){
87
+ distance = $(this).scrollTop(); //スクロールした距離を取得
50
- // 素早くフェードアウトさせる
88
+ if (scrollend <= distance) {
51
- $('div').fadeOut('fast');
89
+ $('.js-demo01-btn-area').fadeOut();
52
-
90
+ } else{
91
+ $('.js-demo01-btn-area').fadeIn();
92
+ }
53
93
  });
54
94
  });
55
-
56
-
57
95
  ```
58
96
  試した事、
59
97
 
60
- $('header-reserve-button').click(function()
61
- を
62
- $('a').click(function()
63
98
 
64
- にしても駄目でした。
65
99
 
66
100
  jquery の確認
67
101
 
CSS3HTML5jQuery

1

追記

2022/04/17 14:11

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -67,4 +67,47 @@
67
67
 
68
68
  スムーススクロールが動いているでjquery は動作していると思います。
69
69
 
70
+ 追記
71
+ [jQuery初心者】閉じるボタンをクリックすると、ゆっくり消える要素を作る | sinpe-Blog](https://sinpe-pgm.com/jquerry_addclass_close_btn/
72
+ )
73
+ こちらを試したところ、　クリックしたら消すことはできましたが、
74
+ スクロールする前にすぐに消えてしまいました。
70
75
 
76
+ ```ここに言語を入力
77
+ // クリックすると非表示//
78
+ $(function () {
79
+ // .header-reserve-buttonをクリックすると
80
+ $('.header-reserve-button').on('click', function () {
81
+ // .header-reserve-buttonのクラスに.hiddenクラスを付加する
82
+ $('.header-reserve-button').addClass('hidden');
83
+ });
84
+ });
85
+
86
+ .header-reserve-button{
87
+ width:244px;
88
+ height:54px;
89
+ background-color:#63B13C;
90
+ color:#fff;
91
+ font-size:1.5rem;
92
+ text-align:center;
93
+ border-radius:30px;
94
+ padding:10px 50px;
95
+ margin:43px 50px;
96
+ }
97
+
98
+ .header-reserve-button.hidden{
99
+ opacity: 0;
100
+ visibility: hidden;
101
+ }
102
+
103
+ <a href="#contact" class="header-reserve-button" target="_blank"
104
+ >お問い合わせ</a
105
+ ><!-- /.header-button -->
106
+ ```
107
+
108
+
109
+
110
+
111
+
112
+
113
+
CSS3HTML5jQuery