Skip to content

Commit

Permalink
Merge pull request #753 from 2004pra/contri2
Browse files Browse the repository at this point in the history 
now all the pages have the scroll to top button
  • Loading branch information
@Tejashri-Taral
Tejashri-Taral authored Nov 4, 2024
2 parents 519802e + 610f643 commit cf53cb2
Show file tree
Hide file tree
Showing 8 changed files with 261 additions and 4 deletions.
43 changes: 43 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,13 +395,39 @@
transition: width 0.09s ease-in-out;
/* border-radius: 10px; */
}
.go-top-btn {
position: fixed;
bottom: 35px;
right: 35px;
cursor: pointer;
border-radius: 50%;
height: 50px;
width: 50px;
background: #000000;
border: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.go-top-btn:hover {
background-color: #000000;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}


</style>


<head>
<body>

<!-- scroll to top button -->
<button class="go-top-btn">
<img width="25px" src="arrow_upper.png" alt="go top">
</button>
<!-- preloader -->
<div id="preloader">
<div class="wrapper">
Expand Down Expand Up @@ -819,6 +845,23 @@ <h2>Subscription Successful!</h2>
});

})();
//js for go top button
const goTopBtn = document.querySelector('.go-top-btn');
window.addEventListener('scroll', checkHeight)
function checkHeight() {
if (window.scrollY > 200) {
goTopBtn.style.display = "flex"
} else {
goTopBtn.style.display = "none"
}
}
goTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: "smooth"
})
})

</script>
<script src="script/progressbar.js"></script>
<script src="active.js"></script>
Expand Down
Binary file added arrow_upper.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions contributors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,4 +330,25 @@ footer {
.footer-info {
text-align: left;
}
}
.go-top-btn {
position: fixed;
bottom: 35px;
right: 35px;
cursor: pointer;
border-radius: 50%;
height: 50px;
width: 50px;
background: #000000;
border: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.go-top-btn:hover {
background-color: #000000;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
22 changes: 22 additions & 0 deletions contributors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@
</head>

<body>

<!-- scroll to top button -->
<button class="go-top-btn">
<img width="25px" src="arrow_upper.png" alt="go top">
</button>
<!-- preloader -->
<div id="preloader">
<div class="wrapper">
Expand Down Expand Up @@ -194,6 +199,23 @@
}
}
});
//js for go top button
const goTopBtn = document.querySelector('.go-top-btn');
window.addEventListener('scroll', checkHeight)
function checkHeight() {
if (window.scrollY > 200) {
goTopBtn.style.display = "flex"
} else {
goTopBtn.style.display = "none"
}
}
goTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: "smooth"
})
})

</script>

<!-- Hero Section -->
Expand Down
44 changes: 44 additions & 0 deletions return-policy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,35 @@
.return-policy-thanks a:hover {
color: #333;
}

.go-top-btn {
position: fixed;
bottom: 35px;
right: 35px;
cursor: pointer;
border-radius: 50%;
height: 50px;
width: 50px;
background: #000000;
border: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.go-top-btn:hover {
background-color: #000000;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
</style>
</head>
<body>
<!-- scroll to top button -->
<button class="go-top-btn">
<img width="25px" src="arrow_upper.png" alt="go top">
</button>
<header class="header" id="header">
<div class="logo">
<a href="/"> <img src="images/logo.png" alt="Logo" srcset=""> </a>
Expand Down Expand Up @@ -363,6 +389,24 @@ <h2>Subscription Successful!</h2>
document.getElementById("cart-icon").addEventListener("click", function() {
window.location.href = "cart.html";
});

//js for go top button
const goTopBtn = document.querySelector('.go-top-btn');
window.addEventListener('scroll', checkHeight)
function checkHeight() {
if (window.scrollY > 200) {
goTopBtn.style.display = "flex"
} else {
goTopBtn.style.display = "none"
}
}
goTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: "smooth"
})
})

</script>

<script src="script/progressbar.js"></script>
Expand Down
45 changes: 43 additions & 2 deletions shopclothing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,12 +296,35 @@
transition: width 0.09s ease-in-out;
/* border-radius: 10px; */
}

.go-top-btn {
position: fixed;
bottom: 35px;
right: 35px;
cursor: pointer;
border-radius: 50%;
height: 50px;
width: 50px;
background: #000000;
border: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.go-top-btn:hover {
background-color: #000000;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}

</style>
</head>
<body>

<!-- scroll to top button -->
<button class="go-top-btn">
<img width="25px" src="arrow_upper.png" alt="go top">
</button>
<!-- Header Section -->
<header class="header" id="header">
<div class="logo">
Expand Down Expand Up @@ -857,6 +880,24 @@ <h2>H&M Blazzer set</h2>
filterclothings();
});
});

//js for go top button
const goTopBtn = document.querySelector('.go-top-btn');
window.addEventListener('scroll', checkHeight)
function checkHeight() {
if (window.scrollY > 200) {
goTopBtn.style.display = "flex"
} else {
goTopBtn.style.display = "none"
}
}
goTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: "smooth"
})
})

</script>
<script src="script/progressbar.js"></script>

Expand Down
45 changes: 44 additions & 1 deletion sneaker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,11 +295,36 @@
transition: width 0.09s ease-in-out;
/* border-radius: 10px; */
}

.go-top-btn {
position: fixed;
bottom: 35px;
right: 35px;
cursor: pointer;
border-radius: 50%;
height: 50px;
width: 50px;
background: #000000;
border: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.go-top-btn:hover {
background-color: #000000;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}

</style>
</head>
<body>

<!-- scroll to top button -->
<button class="go-top-btn">
<img width="25px" src="arrow_upper.png" alt="go top">
</button>
<div id="progress-container">
<div id="progress-bar"></div>
</div>
Expand Down Expand Up @@ -863,6 +888,24 @@ <h2>Merrell Trail</h2>
document.getElementById("cart-icon").addEventListener("click", function() {
window.location.href = "cart.html";
});

//js for go top button
const goTopBtn = document.querySelector('.go-top-btn');
window.addEventListener('scroll', checkHeight)
function checkHeight() {
if (window.scrollY > 200) {
goTopBtn.style.display = "flex"
} else {
goTopBtn.style.display = "none"
}
}
goTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: "smooth"
})
})

</script>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
Expand Down
45 changes: 44 additions & 1 deletion terms-conditions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,37 @@
transition: width 0.09s ease-in-out;
/* border-radius: 10px; */
}

.go-top-btn {
position: fixed;
bottom: 35px;
right: 35px;
cursor: pointer;
border-radius: 50%;
height: 50px;
width: 50px;
background: #000000;
border: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.go-top-btn:hover {
background-color: #000000;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}

</style>
</head>

<body>

<!-- scroll to top button -->
<button class="go-top-btn">
<img width="25px" src="arrow_upper.png" alt="go top">
</button>
<header class="header" id="header">
<div class="logo">
<a href="/"> <img src="images/logo.png" alt="Logo" srcset=""> </a>
Expand Down Expand Up @@ -226,6 +251,24 @@ <h1>Subscribe to Newsletter</h1>
document.getElementById("cart-icon").addEventListener("click", function() {
window.location.href = "cart.html";
});

//js for go top button
const goTopBtn = document.querySelector('.go-top-btn');
window.addEventListener('scroll', checkHeight)
function checkHeight() {
if (window.scrollY > 200) {
goTopBtn.style.display = "flex"
} else {
goTopBtn.style.display = "none"
}
}
goTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: "smooth"
})
})

</script>
<script src="script/progressbar.js"></script>

Expand Down

0 comments on commit cf53cb2

Please sign in to comment.