Skip to content

Commit f042de8

Browse files
Medha SawhneyMedha Sawhney
Medha Sawhney
authored and
Medha Sawhney
committed
adding option for incremental bottom scroll
1 parent 4907349 commit f042de8

File tree

4 files changed

+115
-3
lines changed

4 files changed

+115
-3
lines changed

‎_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ baseurl: # the subpath of your site, e.g. /blog/. Leave blank for root
2020
last_updated: true # set to true if you want to display last updated in the footer
2121
impressum_path: # set to path to include impressum link in the footer, use the same path as permalink in a page, helps to conform with EU GDPR
2222
back_to_top: true # set to false to disable the back to top button
23-
scroll_to_bottom: true # set to false to disable scroll to bottom button
24-
23+
scroll_to_bottom: false # set to false to disable scroll to bottom button
24+
scroll_to_middle: true # scrolls to the buttom incrementally
2525

2626
# -----------------------------------------------------------------------------
2727
# Theme

‎_includes/scripts/scroll_to_bottom.liquid‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,11 @@
44
addScrollToBottom();
55
</script>
66
{% endif %}
7+
8+
{% if site.scroll_to_middle %}
9+
<script src="{{ '/assets/js/vanilla-scroll-to-bottom-incrementally.min.js' | relative_url | bust_file_cache }}"></script>
10+
<script>
11+
addScrollToBottom();
12+
</script>
13+
{% endif %}
14+

‎_layouts/default_about.liquid‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171

7272
</head>
7373

74-
{% include scripts/scroll_to_bottom.liquid %}
7574

7675
<!-- Body -->
7776
<body class="{% if site.navbar_fixed %}fixed-top-nav{% endif %} {% unless site.footer_fixed %}sticky-bottom-footer{% endunless %}">

‎assets/js/vanilla-scroll-to-bottom-incrementally.min.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
"use strict";
2+
3+
function addScrollToBottom() {
4+
function showButton() {
5+
const remainingScroll = scrollContainer.scrollHeight - currentScroll() - window.innerHeight;
6+
7+
// Hide the button when only two clicks are left
8+
if (remainingScroll <= 1 * incrementAmount) {
9+
button.className = "hidden";
10+
} else {
11+
button.className = ""; // Ensure the button is visible
12+
}
13+
}
14+
15+
function currentScroll() {
16+
return scrollContainer.scrollTop || document.documentElement.scrollTop || 0;
17+
}
18+
19+
function scrollToPosition(position) {
20+
scrollContainer.scrollTop = position;
21+
document.documentElement.scrollTop = position;
22+
}
23+
24+
function scrollIncrementally() {
25+
// Scroll down by a specific amount each time the button is clicked
26+
var targetPosition = currentScroll() + incrementAmount;
27+
28+
// Make sure we don't scroll past the bottom
29+
if (targetPosition + window.innerHeight > scrollContainer.scrollHeight) {
30+
targetPosition = scrollContainer.scrollHeight - window.innerHeight;
31+
}
32+
33+
scrollToPosition(targetPosition);
34+
showButton(); // Update button visibility after scrolling
35+
}
36+
37+
var options = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
38+
backgroundColor = options.backgroundColor || "#e2e2e2", // Gray background similar to the back-to-top button
39+
cornerOffset = options.cornerOffset || 20,
40+
diameter = options.diameter || 40,
41+
ease = options.ease || function (t) { return .5 * (1 - Math.cos(Math.PI * t)); },
42+
id = options.id || "scroll-to-bottom",
43+
innerHTML = options.innerHTML || '<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"></path></svg>', // Down arrow SVG
44+
scrollContainer = options.scrollContainer || document.body,
45+
scrollDuration = options.scrollDuration || 100,
46+
showWhenScrollTopIs = options.showWhenScrollTopIs || 1,
47+
size = options.size || diameter,
48+
textColor = options.textColor || "#000", // Arrow color similar to back-to-top button
49+
zIndex = options.zIndex || 9999; // Ensure the button is always on top
50+
51+
var n = Math.round(.5 * size), // Adjusted for better centering
52+
i = Math.round(.25 * size), // Adjusted for better centering
53+
d = "#" + id + "{background:" + backgroundColor + ";-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;top:" + cornerOffset + "px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);color:" + textColor + ";cursor:pointer;display:block;height:" + size + "px;opacity:1;outline:0;position:fixed;right:" + cornerOffset + "px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-transition:top .2s,opacity .2s;-o-transition:top .2s,opacity .2s;-moz-transition:top .2s,opacity .2s;transition:top .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:" + size + "px;z-index:" + zIndex + "}#" + id + " svg{display:block;fill:currentColor;height:" + n + "px;margin:" + i + "px auto 0;width:" + n + "px}#" + id + ".hidden{top:-" + size + "px;opacity:0}";
54+
55+
var r = document.createElement("style");
56+
r.appendChild(document.createTextNode(d));
57+
document.head.insertAdjacentElement("afterbegin", r);
58+
59+
var incrementAmount = window.innerHeight / 1.5; // Set the scroll increment amount
60+
61+
var button = function () {
62+
var o = document.createElement("div");
63+
return o.id = id, o.className = "", o.innerHTML = innerHTML, o.addEventListener("click", function (o) {
64+
o.preventDefault();
65+
scrollIncrementally(); // Incremental scrolling
66+
}), document.body.appendChild(o), o;
67+
}(),
68+
hidden = !1,
69+
threshold = showWhenScrollTopIs;
70+
71+
function adjustButtonPosition() {
72+
var navbarHeight = document.querySelector('.navbar').offsetHeight || 0;
73+
74+
// Set the button's top position considering the navbar height
75+
var finalPosition = navbarHeight + 20; // Adjust this value as needed to ensure it's not hidden under the navbar
76+
button.style.top = finalPosition + "px";
77+
}
78+
79+
adjustButtonPosition(); // Initial adjustment to ensure visibility
80+
81+
window.addEventListener("resize", adjustButtonPosition); // Adjust if window is resized
82+
(scrollContainer === document.body ? window : scrollContainer).addEventListener("scroll", showButton);
83+
showButton();
84+
}
85+
86+
window.addEventListener("load", function () {
87+
var button = document.getElementById("scroll-to-bottom"),
88+
stickyTop = document.querySelector(".sticky-top"),
89+
fixedTop = document.querySelector(".fixed-top");
90+
91+
button && window.addEventListener("scroll", function () {
92+
if (stickyTop) {
93+
var stickyTopRect = stickyTop.getBoundingClientRect();
94+
window.scrollY > stickyTopRect.height
95+
? (button.style.position = "fixed", button.style.top = stickyTopRect.height + 15 + "px")
96+
: (button.style.position = "fixed", button.style.top = stickyTopRect.height + 15 + "px");
97+
}
98+
99+
if (fixedTop) {
100+
var fixedTopRect = fixedTop.getBoundingClientRect();
101+
button.style.position = "fixed";
102+
button.style.top = fixedTopRect.height + 15 + "px";
103+
}
104+
});
105+
});

0 commit comments

Comments
 (0)