Skip to content

Commit 570d951

Browse files
gto76gto76
committed
Added back to top button
1 parent 3f2daf8 commit 570d951

File tree

4 files changed

+111
-6
lines changed

4 files changed

+111
-6
lines changed

‎index.html

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<title>Comprehensive Python Cheatsheet</title>
88
<link rel="icon" href="web/favicon.png">
99
<link rel="stylesheet" href="web/default.min.css">
10+
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
1011
<meta name="twitter:card" content="summary">
1112
<meta name="twitter:title" content="Comprehensive Python Cheatsheet">
1213
<meta name="twitter:description" content="Exhaustive, simple, beautiful and concise. A truly pythonic cheat sheet about Python programming language.">
@@ -141,6 +142,49 @@
141142
padding: 1em;
142143
white-space: pre-wrap;
143144
}
145+
146+
#return-to-top {
147+
position: fixed;
148+
bottom: 20px;
149+
right: 20px;
150+
background: rgb(0, 0, 0);
151+
background: rgba(0, 0, 0, 0.2);
152+
width: 50px;
153+
height: 50px;
154+
display: block;
155+
text-decoration: none;
156+
-webkit-border-radius: 35px;
157+
-moz-border-radius: 35px;
158+
border-radius: 35px;
159+
display: none;
160+
-webkit-transition: all 0.3s linear;
161+
-moz-transition: all 0.3s ease;
162+
-ms-transition: all 0.3s ease;
163+
-o-transition: all 0.3s ease;
164+
transition: all 0.3s ease;
165+
}
166+
167+
#return-to-top i {
168+
color: #fff;
169+
margin: 0;
170+
position: relative;
171+
left: 16px;
172+
top: 13px;
173+
font-size: 19px;
174+
-webkit-transition: all 0.3s ease;
175+
-moz-transition: all 0.3s ease;
176+
-ms-transition: all 0.3s ease;
177+
-o-transition: all 0.3s ease;
178+
transition: all 0.3s ease;
179+
}
180+
181+
#return-to-top:hover {
182+
background: rgba(0, 0, 0, 0.85);
183+
}
184+
185+
#return-to-top:hover i {
186+
color: #ffffff;
187+
}
144188
</style>
145189

146190
<body>
@@ -149,6 +193,7 @@
149193
<a href="../" rel="author">Jure Šorn</a>
150194
</header>
151195

196+
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
152197
<h1 id="comprehensivepythoncheatsheet">Comprehensive Python Cheatsheet</h1>
153198
<p class="banner"><sup><a href="https://raw.githubusercontent.com/gto76/python-cheatsheet/master/README.md">Download text file</a>, <a href="https://github.com/gto76/python-cheatsheet">Fork me on GitHub</a> or <a href="https://github.com/gto76/python-cheatsheet/wiki/Frequently-Asked-Questions">Check out FAQ</a>.
154199
</sup></p>
@@ -1817,7 +1862,7 @@ <h2 id="basicscripttemplate"><a href="#basicscripttemplate" name="basicscripttem
18171862
<br>
18181863
<br>
18191864
<br>
1820-
<script src="web/jquery-3.4.0.slim.min.js"></script>
1865+
<script src="web/jquery-3.4.0.min.js"></script>
18211866
<script src="web/script_2.js"></script>
18221867
</body>
18231868
</html>

‎web/jquery-3.4.0.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/script_2.js

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,25 @@ const DIAGRAM_2_B =
4646
(function(d){function c(c){b.style.fontFamily=c;e.appendChild(b);f=b.clientWidth;e.removeChild(b);return f}var f,e=d.body,b=d.createElement("span");b.innerHTML=Array(100).join("wi");b.style.cssText=["position:absolute","width:auto","font-size:128px","left:-99999px"].join(" !important;");var g=c("monospace"),h=c("serif"),k=c("sans-serif");window.isFontAvailable=function(b){return g!==c(b+",monospace")||k!==c(b+",sans-serif")||h!==c(b+",serif")}})(document);
4747

4848
if (!isFontAvailable('Menlo')) {
49-
$(`code:contains(${DIAGRAM_1_B})`).html(DIAGRAM_1_A);
50-
$(`code:contains(${DIAGRAM_2_B})`).html(DIAGRAM_2_A);
51-
var htmlString = $('code:contains(ᴺᴱᵂ)').html().replace(/ᴺᴱᵂ/g, '');
52-
$('code:contains(ᴺᴱᵂ)').html(htmlString);
49+
$(`code:contains(${DIAGRAM_1_B})`).html(DIAGRAM_1_A);
50+
$(`code:contains(${DIAGRAM_2_B})`).html(DIAGRAM_2_A);
51+
var htmlString = $('code:contains(ᴺᴱᵂ)').html().replace(/ᴺᴱᵂ/g, '');
52+
$('code:contains(ᴺᴱᵂ)').html(htmlString);
5353
}
5454

55+
// ===== Scroll to Top ====
56+
$(window).scroll(function() {
57+
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
58+
$('#return-to-top').fadeIn(200); // Fade in the arrow
59+
} else {
60+
$('#return-to-top').fadeOut(200); // Else fade out the arrow
61+
}
62+
});
5563

64+
$('#return-to-top').click(function() { // When arrow is clicked
65+
$('body,html').animate({
66+
scrollTop : 0 // Scroll to top of body
67+
}, 500);
68+
});
5669

5770

‎web/template.html

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<title>Comprehensive Python Cheatsheet</title>
88
<link rel="icon" href="web/favicon.png">
99
<link rel="stylesheet" href="web/default.min.css">
10+
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
1011
<meta name="twitter:card" content="summary">
1112
<meta name="twitter:title" content="Comprehensive Python Cheatsheet">
1213
<meta name="twitter:description" content="Exhaustive, simple, beautiful and concise. A truly pythonic cheat sheet about Python programming language.">
@@ -141,6 +142,49 @@
141142
padding: 1em;
142143
white-space: pre-wrap;
143144
}
145+
146+
#return-to-top {
147+
position: fixed;
148+
bottom: 20px;
149+
right: 20px;
150+
background: rgb(0, 0, 0);
151+
background: rgba(0, 0, 0, 0.2);
152+
width: 50px;
153+
height: 50px;
154+
display: block;
155+
text-decoration: none;
156+
-webkit-border-radius: 35px;
157+
-moz-border-radius: 35px;
158+
border-radius: 35px;
159+
display: none;
160+
-webkit-transition: all 0.3s linear;
161+
-moz-transition: all 0.3s ease;
162+
-ms-transition: all 0.3s ease;
163+
-o-transition: all 0.3s ease;
164+
transition: all 0.3s ease;
165+
}
166+
167+
#return-to-top i {
168+
color: #fff;
169+
margin: 0;
170+
position: relative;
171+
left: 16px;
172+
top: 13px;
173+
font-size: 19px;
174+
-webkit-transition: all 0.3s ease;
175+
-moz-transition: all 0.3s ease;
176+
-ms-transition: all 0.3s ease;
177+
-o-transition: all 0.3s ease;
178+
transition: all 0.3s ease;
179+
}
180+
181+
#return-to-top:hover {
182+
background: rgba(0, 0, 0, 0.85);
183+
}
184+
185+
#return-to-top:hover i {
186+
color: #ffffff;
187+
}
144188
</style>
145189

146190
<body>
@@ -149,6 +193,7 @@
149193
<a href="../" rel="author">Jure Šorn</a>
150194
</header>
151195

196+
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
152197
<div id=main_container></div>
153198

154199
<footer>
@@ -159,7 +204,7 @@
159204
<br>
160205
<br>
161206
<br>
162-
<script src="web/jquery-3.4.0.slim.min.js"></script>
207+
<script src="web/jquery-3.4.0.min.js"></script>
163208
<script src="web/script_2.js"></script>
164209
</body>
165210
</html>

0 commit comments

Comments
 (0)