Hub

Public·241 members

Back

Cash Richard

May 17, 2023

Verified Account

All of this code just for the new back to top of page feature on the online site/all devices/main.🤣

<!DOCTYPE html>

<html>

<head>

<style>

#scroll-to-top {

display: none;

position: fixed;

bottom: 60px;

left: 20px;

z-index: 99;

background-color: transparent;

cursor: pointer;

border: none;

opacity: 0;

transition: opacity 0.3s, bottom 0.3s;

}

#scroll-to-top .box {

position: relative;

width: 40px;

height: 40px;

border: 2px solid #FF1747;

background-color: white;

border-radius: 4px;

box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);

transition: transform 0.3s;

}

#scroll-to-top .arrow {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

opacity: 1;

transition: opacity 0.3s;

}

#scroll-to-top .arrow:before {

content: "";

position: absolute;

width: 10px;

height: 10px;

border-top: 2px solid #1E1D1D;

border-right: 2px solid #1E1D1D;

transform: rotate(-45deg);

top: calc(50% - 4px);

left: calc(50% - 4px);

transition: border-color 0.3s;

}

#scroll-to-top:hover .box {

transform: translate(-50%, -50%) translateY(-2px);

}

#scroll-to-top:hover .arrow:before {

border-color: #FF1747;

}

#scroll-to-top.fade-in {

display: block;

opacity: 1;

}

#scroll-to-top.fade-out {

opacity: 0;

}

</style>

</head>

<body>

</div>

</button>

var scrollThreshold = 500; // Adjust this value to change the scroll threshold

var fadeOutDelay = 500; // Adjust this value to change the fade-out delay

var scrollTimeout;

var fadeTimeout;

var isVisible = false;

window.addEventListener('scroll', function() {

clearTimeout(scrollTimeout);

clearTimeout(fadeTimeout);

if (window.scrollY > scrollThreshold && !isVisible) {

fadeInElement(document.getElementById("scroll-to-top"));

isVisible = true;

} else if (window.scrollY <= scrollThreshold && isVisible) {

fadeOutElement(document.getElementById("scroll-to-top"), fadeOutDelay);

isVisible = false;

}

});

function scrollToTop() {

const scrollDuration = 500; // Duration of the scroll animation in milliseconds

const scrollStep = -window.scrollY / (scrollDuration / 15);

const scrollInterval = setInterval(function() {

if (window.scrollY !== 0) {

window.scrollBy(0, scrollStep);

} else {

clearInterval(scrollInterval);

}

}, 15);

}

function fadeInElement(element) {

if (!element.classList.contains("fade-in")) {

element.style.display = "block";

element.classList.remove("fade-out");

void element.offsetWidth; // Trigger reflow to restart the animation

element.classList.add("fade-in");

}

function fadeOutElement(element, delay) {

if (!element.classList.contains("fade-out")) {

element.classList.remove("fade-in");

element.classList.add("fade-out");

}

fadeTimeout = setTimeout(function() {

element.style.display = "none";

element.classList.remove("fade-out");

}, delay);

}

</script>

</body>

</html>

46 Views

Cash Richard

17 may 2023

•

It was crazy but thanks to Chat GPT for helping with this one. The first time Chat GPT has created code for the site! I was going to tell Chat GPT but then I forgot. History of the first code used on cashrichard.com from Chat GPT/Open AI! This is one of the things I worked on today.

Members

Big Boy
Akanksha
Alex Hammond
thepopularsmart1 thepopularsmart1
thepopularsmart1 thepopularsmart1
girjealiub
girjealiub

See All Members (241)

⚠ Warning: Leaving this Site

Hub

All of this code just for the new back to top of page feature on the online site/all devices/main.🤣

Members