Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: Enhancing the scroll-to-top button in Stakeholder's main page and Student's main page #408

Merged
merged 1 commit into from
Nov 8, 2024
Merged

Feat: Enhancing the scroll-to-top button in Stakeholder's main page and Student's main page #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 96 additions & 1 deletion public/css/main_page_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ ul {
background-color: #ffffff;
}

#scrollToTop {
/*#scrollToTop {
position: fixed;
bottom: 12%;
right: 18px;
Expand All @@ -507,6 +507,101 @@ ul {

#scrollToTop:hover {
background-color: darkorange;
}*/

.scroll-top {
position: fixed;
right: 0.5em;
background: linear-gradient(100deg, #4453b8, #328aa5, #0b97d3);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
overflow: visible;
z-index: 10;
/* Ensure button is on top */
}

.scroll-top.show {
opacity: 1;
visibility: visible;
}

.scroll-top:hover {
transform: scale(1.1);
/* Subtle scaling instead of expanding */
box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
/* Slightly larger shadow */
}

.scroll-top:active {
transform: scale(1.05);
/* Minor scale reduction on click */
}

.scroll-top-icon {
position: relative;
z-index: 2;
transition: transform 0.3s ease;
}

.scroll-top:hover .scroll-top-icon {
transform: translateY(-3px);
}

/* Progress Ring Styling */
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
/* To start from the top */
}

.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform-origin: 50% 50%;
}

/* Pulse Animation */
@keyframes pulse {
0% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}

50% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
}

100% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}
}

.scroll-top:hover {
animation: pulse 1.5s infinite;
}

.scroll-top.show {
animation: none;
/* No animation when showing the button */
}

.scroll-top.show:hover {
animation: pulse 1.5s infinite;
/* Pulse on hover */
}

/*responsive*/
Expand Down
98 changes: 87 additions & 11 deletions public/css/stk_mainstyling.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,23 +366,99 @@ ul {
background-color: #ffffff;
}

#scrollToTop {
.scroll-top {
position: fixed;
bottom: 12%;
right: 18px;
z-index: 99;
background-color: orange;
right: 0.5em;
background: linear-gradient(100deg, #4453b8, #328aa5, #0b97d3);
color: white;
border: none;
padding: 14px 20px;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 19px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
overflow: visible;
z-index: 10;
/* Ensure button is on top */
}

.scroll-top.show {
opacity: 1;
visibility: visible;
}

.scroll-top:hover {
transform: scale(1.1);
/* Subtle scaling instead of expanding */
box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
/* Slightly larger shadow */
}

.scroll-top:active {
transform: scale(1.05);
/* Minor scale reduction on click */
}

.scroll-top-icon {
position: relative;
z-index: 2;
transition: transform 0.3s ease;
}

.scroll-top:hover .scroll-top-icon {
transform: translateY(-3px);
}

/* Progress Ring Styling */
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
/* To start from the top */
}

.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform-origin: 50% 50%;
}

/* Pulse Animation */
@keyframes pulse {
0% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}

50% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
}

100% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}
}

.scroll-top:hover {
animation: pulse 1.5s infinite;
}

.scroll-top.show {
animation: none;
/* No animation when showing the button */
}

#scrollToTop:hover {
background-color: darkorange;
.scroll-top.show:hover {
animation: pulse 1.5s infinite;
/* Pulse on hover */
}

/*responsive*/
Expand Down
54 changes: 51 additions & 3 deletions public/main_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ <h2 style="color: black;">Top Research Papers</h2>
distinctio natus accusamus quibusdam cum perspiciatis in aspernatur!</li>
</ul>
</div>
<h2 style="color: black;">Top Research Papers in Insti</h2>
<h2 style="color: black;">Top Research Papers in Institute</h2>
<div class="insti_papers">
<ul class="insti_papers_ul">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam accusamus beatae blanditiis
Expand Down Expand Up @@ -323,9 +323,57 @@ <h4>follow us</h4>
</div>
</footer>

<button id="scrollToTop" title="Back to top">
<i class="fa-solid fa-arrow-up"></i>
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 72px;">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
</div>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
const progressCircle = document.querySelector(".progress-ring__circle");
const radius = progressCircle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

// Set the circle progress properties
progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
progressCircle.style.strokeDashoffset = circumference;

// Function to show or hide the button based on scroll position
function toggleScrollButton() {
if (window.scrollY > 100) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
}

// Function to set the scroll progress on the button ring
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
}

// Listen for scroll events to update button visibility and progress
window.addEventListener("scroll", () => {
toggleScrollButton();
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
setProgress(scrollPercent);
});

// Smooth scroll to top when the button is clicked
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

</script>

<script>
window.embeddedChatbotConfig = {
Expand Down
52 changes: 50 additions & 2 deletions public/stk_mainpage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,9 +275,57 @@ <h4>follow us</h4>
</div>
</footer>

<button id="scrollToTop" title="Back to top">
<i class="fa-solid fa-arrow-up"></i>
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 72px;">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
</div>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
const progressCircle = document.querySelector(".progress-ring__circle");
const radius = progressCircle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

// Set the circle progress properties
progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
progressCircle.style.strokeDashoffset = circumference;

// Function to show or hide the button based on scroll position
function toggleScrollButton() {
if (window.scrollY > 100) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
}

// Function to set the scroll progress on the button ring
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
}

// Listen for scroll events to update button visibility and progress
window.addEventListener("scroll", () => {
toggleScrollButton();
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
setProgress(scrollPercent);
});

// Smooth scroll to top when the button is clicked
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

</script>

<script src="script/stk_mainpage.js"></script>
</body>
Expand Down
Loading