ページトップボタンの位置を要素内で常に固定したい

前提・実現したいこと

お世話になっています。

どうにも上手くいかなく、お力を借りられたらと思います。

要件としてはタイトルの通りなのですが、ページトップボタンをの位置を要素内で常に固定したいです。

単純に画面上のある位置に固定するだけならposition:fixed;を利用すれば良いかと思いますし、流石に自分でも出来ます。
ただ、ある要素に固定が上手くいきません。
これだけだと分かりにくいと思うので、詳細は下記を見て頂ければと思います。

発生している問題・エラーメッセージ

・ボタンが画面に追従する形であり、画面に固定されない

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>test</title>
8<link rel="stylesheet" type="text/css" href="css/実験.css" media="all">
9<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" >
10<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
11<script>
12
13$(document).ready(function(){
14    $("#topBtn").hide();
15    $(window).on("scroll", function() {
16        if ($(this).scrollTop() > 100) {
17            $("#topBtn").fadeIn("fast");
18        } else {
19            $("#topBtn").fadeOut("fast");
20        }
21        scrollHeight = $(document).height();
22        scrollPosition = $(window).height() + $(window).scrollTop();
23        footHeight = $("footer").innerHeight(); 
24        if ( scrollHeight - scrollPosition  <= footHeight ) {
25            $("#topBtn").css({
26                "position":"absolute", 
27                "bottom": footHeight -　30,
28				"z-index": 1
29            });
30        } else { 
31            $("#topBtn").css({
32                "position":"fixed",
33                "bottom": "20px",
34            });
35        }
36    });
37    $('#topBtn').click(function () {
38        $('body,html').animate({
39        scrollTop: 0
40        }, 400);
41        return false;
42    });
43});
44
45</script>
46
47</head>
48<body>
49<header>
50</header>
51
52<div class="contents">
53
54<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
55ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
56ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
57ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
58ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
59ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
60ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
61ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
62ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
63ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
64ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
65ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
66ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
67ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
68ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
69ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
70ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
71ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
72ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
73ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
74ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
75ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
76ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
77ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
78
79 <a href="#" class="topBtn" id="topBtn"><img src="img/pagetop.png" alt="ページトップ"></a>
80                
81                    <footer>
82                     <div class="footer">
83                        <ul class="clearfix">
84                          <li>
85                            <a href="#">sample</a>
86                          </li>
87                          <li>
88                            <a href="#">sample</a>
89                          </li>
90                          <li>
91                            <a href="#">sample</a>
92                          </li>
93                          <li>
94                            <a href="#">sample</a>
95                          </li>
96                          <li>
97                            <a href="#">sample</a>
98                          </li>
99                          <li>
100                            <a href="#">sample</a>
101                          </li>
102                          <li>
103                            <a href="#">sample</a>
104                          </li>
105                          <li>
106                            <a href="#">sample</a>
107                          </li>
108                          <li>
109                            <a href="#">sample</a>
110                          </li>
111                          <li>
112                            <a href="#">sample</a>
113                          </li>
114                          <li>
115                            <a href="#">sample</a>
116                          </li>
117                          
118                          </ul>
119                        </div>
120                      <!-- footer -->
121                </footer>
122                
123                </div>
124</body>
125</html>

css
1body {
2	font-family: "Verdana", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo","   sans-serif";
3	color: #000;
4	background:#fff;
5	font-size:0.9em;	
6}
7
8.contents{
9	max-width:950px;
10	background:#fff;
11	margin:0 auto;
12	line-height:140%;
13	position:relative;
14}
15
16/*フッター*/
17
18.footer{
19	position: relative;
20    background:#960;
21    padding: 10px 0 20px 0;
22    overflow: hidden;
23	border-radius:10px;
24	-webkit-border-radius:10px;
25	-moz-border-radius:10px;
26	margin-top:25px;
27	height:30px;
28}
29
30.footer  ul{
31    width: 90%;
32	margin:0 auto;
33}
34
35.footer li {
36    float: left;
37    width: 140px;
38    font-size: 11px;
39    text-align: left;
40}
41
42.footer li a{
43	color:#fff;
44	text-decoration:none;
45}
46
47.footer li a:before{
48	content:"□ ";
49}
50
51
52.topBtn {
53  position:fixed;
54  right:0px;
55  display:block;
56}

多分上記のコードは割と一般的なコードの部類だと思うのですが、したいこ事としては、フッターが見える際にボタンが存在するfooterの端の位置（左右）にボタンを固定したいです。
感覚としてはstickyに近いと思います。
class="contents"内に固定した状態でfixed状態になって欲しい。
そんな意味合いです。

試したこと

・ネットでの検索
・sticky要素

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

pagetop.png
以前に自分が質問したスクロール後、出現画像をある位置に固定したいや検索した際に発見したページトップに戻るボタンを常に右下に表示したいが、フッター上で止めたい辺りの応用で出来そうな気もしているのですが、どうも上手くいきません。
又、sticky要素で出来そうな気もしているのですが、sticky要素を使い慣れていないのもあり、上手くいきませんでした。

何か不明点があれば指摘して頂ければ追記します。
まだまだ未熟身なので、申し訳ありませんが、お力をお借り出来れば幸いです。
宜しくお願い致します。

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

回答1件

ベストアンサー

CSS
1#topBtn {
2  position: fixed;
3  bottom: 0;
4  display: none
5}

jQuery
1$(window).scroll(function(){
2  var footer = $('footer').offset().top - $(window).height();
3  var now = $(document).scrollTop();
4  if(now>footer){
5    $('#topBtn').fadeIn('slow');
6  } else {
7    $('#topBtn').fadeOut('slow');
8  }
9});