我正在制作一個 div 來滾動到頁面頂部并在滾動時出現，但它不起作用。div 出現在開頭而不滾動。我發現由于某種原因，它可以在沒有頁面其余代碼的情況下在自己的 javascript 代碼上作業，但它也出現在開頭，直到我滾動它隱藏然后很快再次出現。我無法弄清楚究竟是什么原因造成的。
相關代碼（如果您評論有關標題的其他javascript函式，則滾動功能將起作用，但正如我在您滾動一點后所說的那樣）：
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 class="main-container header">
<h2 class="header-element main-header"><a href="index.html">blog name</a></h2>
<nav class="header-element nav-menu">
<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 class="header-element search-bar" action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main class="main-container main">
<h3 class="section-header"><a href="recommended.html">Recommended</a></h3>
<section class="blogs-container recommended">
<a class="prev" onclick="scrollLeftFunction()">❮</a>
<article class="blog-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 class="blog-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 class="blog-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 class="blog-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 class="next" onclick="scrollRightFunction()">❯</a>
</section>
<div class="back-to-top-wrapper">
<a href="#top" aria-label="Scroll to Top" title="scroll to top">⇑</a>
</div>uj5u.com熱心網友回復：
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 class="main-container header">
<h2 class="header-element main-header"><a href="index.html">blog name</a></h2>
<nav class="header-element nav-menu">
<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 class="header-element search-bar" action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main class="main-container main">
<h3 class="section-header"><a href="recommended.html">Recommended</a></h3>
<section class="blogs-container recommended">
<a class="prev" onclick="scrollLeftFunction()">❮</a>
<article class="blog-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 class="blog-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 class="blog-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 class="blog-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 class="next" onclick="scrollRightFunction()">❯</a>
</section>
<div class="back-to-top-wrapper" style="display : none;">
<a href="#top" aria-label="Scroll to Top" title="scroll to top">⇑</a>
</div>這將起作用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/516338.html