topに戻るボタンを一定の位置で止まるようにしたいです。

前提・実現したいこと

topに戻るボタンを一定の位置までスクロールしたらそこで止まるように設定したいのですが、
js初心者でわからず困っています。
わかるかたご教授いただけますと幸いです。よろしくお願いします。

追記

説明不足で申し訳ございません。
下記のリンクのような感じで、「トップに戻るボタン自体」を指定した位置で止めたいです。
https://ss-complex.com/work_top_back_button/

該当のソースコード

HTML
1<div id="pagetop"><a href="#"></a></div>

script
1   <script>
2        $(function(){
3        var pagetop = $('#pagetop');
4        // ボタン非表示
5        pagetop.hide();
6        // 100px スクロールしたらボタン表示
7        $(window).scroll(function () {
8            if ($(this).scrollTop() > 100) {
9                pagetop.fadeIn();
10            } else {
11                pagetop.fadeOut();
12            }
13        });
14
15        pagetop.click(function () {
16            $('body, html').animate({ scrollTop: 0 }, 500);
17            return false;
18        });
19        });
20    </script>

css
1#pagetop{
2    width: 50px;
3    height: 50px;
4    position: fixed;
5    right: 20px;
6    bottom: 20px;
7    background: #ef3f40;
8    opacity: 0.6;
9    border-radius: 50%;
10  }
11  #pagetop a{
12    position: relative;
13    display: block;
14    width: 50px;
15    height: 50px;
16    text-decoration: none;
17  }
18  #pagetop a::before{
19    font-family: 'Font Awesome 5 Free';
20    font-weight: 900;
21    content: '\f0d8';
22    font-size: 25px;
23    color: #fff;
24    position: absolute;
25    width: 25px;
26    height: 35px;
27    top: -5px;
28    bottom: 0;
29    right: 0;
30    left: 0;
31    margin: auto;
32    text-align: center;
33  }

補足情報（FW/ツールのバージョンなど）

jqueryのバージョンは3.4.1です。

行動規範の内容に同意します

回答1件

ベストアンサー

一定の位置でとまったらそれはもうtopへ戻るではないと思いますが・・・
逆に一定の位置を指定してページ内リンクを貼ればよいでしょう

投稿2020/09/29 03:34

yambejp

総合スコア116724

sasaki_0000

2020/09/29 03:39

説明がわかりづらく申し訳ございません。説明に追記しました。

yambejp

2020/09/29 03:46 編集

topに戻るボタンを押すのではないのですね・・・失礼しました最下部にあるTOPに戻るを最後までスクロールしたときにどこに置きたいのでしょうか？

yambejp

2020/09/29 04:15

かりにこんな風にした場合 <div id="pagetop"><a href="#"></a></div> 1 2 3 4 5 6 7 8 <footer>foot</footer>

yambejp

2020/09/29 04:16

$(window).scroll(function () { var h1=window.pageYOffset; var h2=window.innerHeight; var h3=document.documentElement.offsetHeight; var h4=$('footer').height(); $('#pagetop').css('bottom',(h1+h2+h4>h3)?h1+h2-h3+h4+40:20); if ($(this).scrollTop() > 100) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } });

sasaki_0000

2020/09/29 05:03

返答が遅くなり申し訳ありません。フッターにボタンが半分かかる形で固定したいです。ありがとうございます！いただいたコード試してみます。

yambejp

2020/09/29 05:12

> フッターにボタンが半分かかる形ちょっと表現が微妙ですが、微調整はそれほど難しくないと思います

行動規範の内容に同意します