I am making a div to scroll to the page top and to appear when scrolling, but it is not working. the div appears right at the beginning without scrolling. I figured out that for some reason it works on its own javascript code without the rest of the page's code but also it appears at the beginning until I scroll it hides and then shortly appears again. I can't figure out what exactly is causing that.
relevant code (if you comment the other javascript function concerning the header the scrolling function will work but as i said after you scroll a little):
let scrollupbutton = document.getElementsByClassName("back-to-top-wrapper");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollupbutton[0].style.display = "block";
} else {
scrollupbutton[0].style.display = "none";
}
}
let header = document.getElementsByClassName("title")
window.onscroll = function() {transformheader()};
function transformheader() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].style.fontSize = "30px";
header[0].style.opacity = 0
header[0].style.transform = "translate3d(0px, 79.5556px, 0px)";
} else {
header[0].style.fontSize = "90px";
header[0].style.opacity = 1
}
}
function scrollrightfunction() {}.back-to-top-wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right: 0;
bottom: 0;
margin: 70px;
width: 50px;
height: 50px;
text-align: center;
background-color: rgb(122, 133, 183, 0.3);
z-index: 999;
}
.back-to-top-wrapper a {
color: rgba(110, 75, 206, 0.8);
font-size: 30px;
text-decoration: none;
width: inherit;
cursor: pointer;
}
.back-to-top-wrapper:hover {
background-color: rgba(166, 46, 88, .8);
}
.back-to-top-wrapper a:hover {
color: antiquewhite;
} <header >
<h2 ><a href="index.html">blog name</a></h2>
<nav >
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<form action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 >Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main >
<h3 ><a href="recommended.html">Recommended</a></h3>
<section >
<a onclick="scrollLeftFunction()">❮</a>
<article >
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam voluptas dolorum unde non ea consequatur ducimus quo ipsam quam saepe, inventore pariatur! Dolorum magnam consequatur iste expedita, optio reprehenderit iusto.</p>
</a>
</article>
<article >
<a href="blog.html">
<img src="/images/blog-pic2.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis facilis dolorum odio ad inventore fuga similique blanditiis, nobis tempore cumque quis porro officiis deserunt, magnam veritatis provident harum quaerat aperiam. lo</p>
</a>
</article>
<article >
<a href="blog.html">
<img src="/images/blog-pic3.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi veritatis delectus minus dolorum assumenda unde quas quidem tenetur, sapiente doloremque quam nobis, ducimus enim excepturi qui nulla. Dolorem, officia a?</p>
</a>
</article>
<article >
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos perspiciatis placeat ratione officia dolore iusto, minus ipsum modi enim iste reiciendis sed doloribus sapiente voluptatem cum. Blanditiis, repudiandae. Sapiente, nulla.</p>
</a>
</article>
<a onclick="scrollRightFunction()">❯</a>
</section>
<div >
<a href="#top" aria-label="Scroll to Top" title="scroll to top">⇑</a>
</div>CodePudding user response：
let scrollupbutton = document.getElementsByClassName("back-to-top-wrapper");
window.addEventListener("scroll",function(){
scrollFunction();
})
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
scrollupbutton[0].style.display = "block";
} else {
scrollupbutton[0].style.display = "none";
}
}
let header = document.getElementsByClassName("title")
window.onscroll = function() {transformheader()};
function transformheader() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].style.fontSize = "30px";
header[0].style.opacity = 0
header[0].style.transform = "translate3d(0px, 79.5556px, 0px)";
} else {
header[0].style.fontSize = "90px";
header[0].style.opacity = 1
}
}
function scrollrightfunction() {}.back-to-top-wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right: 0;
bottom: 0;
margin: 70px;
width: 50px;
height: 50px;
text-align: center;
background-color: rgb(122, 133, 183, 0.3);
z-index: 999;
}
.back-to-top-wrapper a {
color: rgba(110, 75, 206, 0.8);
font-size: 30px;
text-decoration: none;
width: inherit;
cursor: pointer;
}
.back-to-top-wrapper:hover {
background-color: rgba(166, 46, 88, .8);
}
.back-to-top-wrapper a:hover {
color: antiquewhite;
}<header >
<h2 ><a href="index.html">blog name</a></h2>
<nav >
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<form action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 >Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main >
<h3 ><a href="recommended.html">Recommended</a></h3>
<section >
<a onclick="scrollLeftFunction()">❮</a>
<article >
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam voluptas dolorum unde non ea consequatur ducimus quo ipsam quam saepe, inventore pariatur! Dolorum magnam consequatur iste expedita, optio reprehenderit iusto.</p>
</a>
</article>
<article >
<a href="blog.html">
<img src="/images/blog-pic2.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis facilis dolorum odio ad inventore fuga similique blanditiis, nobis tempore cumque quis porro officiis deserunt, magnam veritatis provident harum quaerat aperiam. lo</p>
</a>
</article>
<article >
<a href="blog.html">
<img src="/images/blog-pic3.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi veritatis delectus minus dolorum assumenda unde quas quidem tenetur, sapiente doloremque quam nobis, ducimus enim excepturi qui nulla. Dolorem, officia a?</p>
</a>
</article>
<article >
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos perspiciatis placeat ratione officia dolore iusto, minus ipsum modi enim iste reiciendis sed doloribus sapiente voluptatem cum. Blanditiis, repudiandae. Sapiente, nulla.</p>
</a>
</article>
<a onclick="scrollRightFunction()">❯</a>
</section>
<div style="display : none;">
<a href="#top" aria-label="Scroll to Top" title="scroll to top">⇑</a>
</div>This will work