Thank you for your help.
Regarding the subject, I want to make the page top button disappear with slideUp when it reaches the footer position on the website, but it disappears and appears repeatedly.
In the first description, I think it's strange that I set slide when I started scrolling, but I don't know how to fix it.
I am a complete beginner at javascript.
I look forward to your kind cooperation.
https://jsfiddle.net/aq8j1rLL/
$(function(){
vartopBtn = $('.pagetop');
// Hide the Page Top Button
topBtn.hide();
$(window).scroll(function(){
if($(this).scrollTop()>0){
topBtn.slideDown();
} else{
topBtn.slideUp();
}
// Hide when footer is reached
// Document Height
scrollHeight=$( document).height();
// Window Height + Scroll Height → Current Top Position
scrollPosition=$(window).height()+$(window).scrollTop();
// footer height
footHeight=$("footer").innerHeight();
// If the current position is in the footer height position,
if(scrollHeight-scrollPosition<=footHeight){
// Change the position of ".pagetop" to absolute and set it to the footer height position.
topBtn.css({
"position": "absolute", // footer
});
topBtn.slideUp();
} else{
topBtn.css({
"position": "fixed",
});
topBtn.slideDown();
}
});
// Smooth scroll to top
$('.pagetop a').click(function(){
$('body,html') .animate({
scrollTop:0
}, 'slow');
return false;
});
});html,
body{
width: 100%;
height —100%;
}
body{
margin:0;
padding:0;
}
body article {
min-height: 100%;
position:relative;
height —auto!important;
height —100%;
}
#maincontent{
width: 100%;
height —800px;
padding-bottom:48px;
}
/*---- Footer ----*/
footer {
width: 100%;
height: 48px;
background-color:black;
position:absolute;
bottom:0;
}
/*---- Page top button ----*/
# pagetop-wrap{
position:relative;
}
.pagetop{
position:fixed;
right —20px;
bottom —20px;
width: 100px;
height —100px;
}
.pagetop>a{
width: 100px;
height —100px;
font-size: 20px;
line-height: 102px;
background-color:#ffdd3f;
color:white;
text-align:center;
border-radius: 50px;
display:block;
transition —all 0.6ase-in-out 0s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<section id="maincontent"></section>
<footer>
<divid="pagetop-wrap">
<p class="pagetop">
<a href="#">>i class="fa fa-chevron-up">/i>/a>
</p>
</div>
</footer>
</article>
だいぶThe code is quite long, so I cut off any parts that may not have anything to do with this question and line breaks
If you look at the relationship between scroll position and slide direction in the code you asked...
// This is this===window, so it's the same as $(window).scrollTop()
// If the scroll position is at the top of the page, slideUp(), otherwise slideDown()
if($(this).scrollTop()>0){
topBtn.slideDown();
} else{
topBtn.slideUp();
}
// (omitted)
// Scroll to where the footer enters the screen and slideUp()
if(scrollHeight-scrollPosition<=footHeight){
topBtn.css({"position":"absolute"});
topBtn.slideUp();
} else{
topBtn.css({"position":"fixed"});
topBtn.slideDown();
}
If you scroll to the point where the footer enters the screen, it means slideDown() is executed in the first half of if, and then slideUp() is executed in the second half of the if.This causes the movement to come and go.
Scroll events are also called frequently whenever the scroll position changes.Each time, this up and down motion animation is reserved, so even if you stop scrolling, it will continue to move for a while.
As a trial, I tried to display the number of animation waits in the upper left corner.Do this and see how scrolling changes the wait.
$(function(){
vartopBtn = $('.pagetop');
topBtn.hide();
// Show animation wait count
setInterval(function(){
$('#counter').text("queue:"+topBtn.queue().length);
}, 200);
$(window).scroll(function(){
if($(this).scrollTop()>0){
topBtn.slideDown();
} else{
topBtn.slideUp();
}
scrollHeight=$( document).height();
scrollPosition=$(window).height()+$(window).scrollTop();
footHeight=$("footer").innerHeight();
if(scrollHeight-scrollPosition<=footHeight){
topBtn.css({"position":"absolute"});
topBtn.slideUp();
} else{
topBtn.css({"position":"fixed"});
topBtn.slideDown();
}
});
});# counter {position: fixed; width:10em;background:#ddf;}
html,body {margin:0;height:100%;}
article {position:relative;height:auto;}
# maincontent {height:800px;}
footer { width: 100%; height:48px; background-color: black; position: absolute; bottom:0;}
.pagetop {position: fixed; right:20px; bottom:20px; width:100px; height:100px;}
.pagetop>a {width:100px;height:100px;background-color:#ffdd3f;border-radius:50px;display:block;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<divid="counter"></div>
<article>
<section id="maincontent"></section>
<footer>
<divid="pagetop-wrap">
<!--p has a margin and is complicated, so I changed it to div -->
<div class="pagetop">
<a href="#"></a>
</div>
</div>
</footer>
</article>The solution is to erase if($(this).scrollTop()>0).If you want to do something else at the top of the page, try not to call slideUp/Down multiple times in a single scroll event, such as branching at the top of the page, bottom of the page, or otherwise.
This will stop "disappearing and appearing many times".
© 2024 OneMinuteCode. All rights reserved.