Wednesday

Displaying back to top icon with JS if user has scrolled

Issue

Ken Lee helped me with a script that displays a back to top icon if the user has scrolled or that is hidden if he hasn't and there is no need to display the icon.

First problem: The code pasted below works, but not with images as the back to top icon is always hidden although there is a scrollbar and the user needs to scroll. I use Lightbox to display thumbnails of images that can be enlarged by clicking them. I am an amateur, but Ken Lee's script is based on the viewport, but Lightbox uses a negative width to hide the overlay used by it.
Second problem: When I set my screen (1920x1080) to 1024x768, the back to top icon is not displayed although the user has to scroll down slightly. It works with more text, but if there are only 1-2 "BR"s with text, no back to top icon is displayed.

Here is Ken's code:

<script>
function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

</script>
<html>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>


<div id="gototopmark">
<p><a href="#gototop" title="Start of page"><img src="img/toparrow.png" class="icons" border="0"></a>&nbsp;&nbsp;<a href="biografie_de.php" title="back"><img src="img/leftarrow.png" class="icons" border="0"></a>   
</div>

<script>

const box = document.querySelector('#gototopmark');

if (isInViewport(box)){
  box.style.display='none';
}else{
  box.style.display='block';
}

</script>

My Lightbox script uses a negative value for margin-left. Depending on the resolution, it is e.g. -2000px or up to 5200px for high resolutions. The bottom line is that it has to be negative so the Lightbox overlay stays hidden. I think this might be the problem that the back to top icon is always hidden because of the negative value. How can I fix this?

Ken's script works for all my pages, but the ones with a clickable image with Lightbox code.

        /** Default lightbox to hidden */
 margin-left: -5200px;

        /** Position and style */
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.78);
    transition: all .6s;
}

.lightbox img {
        /** Pad the lightbox image */
        max-width: 1173px;
        max-height: 880px;
        margin-top: 24px;
  transition: all .7s;
}

.lightbox:target {
        /** Remove default browser outline */
        outline: none;

        /** Unhide lightbox **/
margin-left: 0;
transition: all .8s;
}

.thumb {
  max-width: 110px;
  max-height: 80px;
}

Solution

For your case (scroll to top), it is best to use a fixed image (background transparent PNG) which, on click, will scroll back to the top of the page (and then hide itself).

The fixed image should only appear when the user scrolls a bit from the top.

The fixed image is:

<div id="bottomx" style="position: fixed; bottom: 20px; right: 20px; visibility:hidden;"><a href="javascript:xtop();" >
<img src=upbutton2.png width=40>
</a></div>

The JS which does the job:


<script>
function xtop() {   
$('html,body').animate({ scrollTop: 0 }, 'slow');
}
</script>


<script>
window.addEventListener('scroll', function(){

if (this.scrollY ==0){
  document.getElementById('bottomx').style.visibility = "hidden";
} else {
  document.getElementById('bottomx').style.visibility = "visible";
  }
}
)
</script>

So, the whole code is:

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>

<html>

<div id="bottomx" style="position: fixed; bottom: 20px; right: 20px; visibility:hidden;"><a href="javascript:xtop();" >
<img src=upbutton2.png width=40>
</a></div>

<body>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>
TEST<br>


</body>
</html>



<script>
function xtop() {   
$('html,body').animate({ scrollTop: 0 }, 'slow');
}
</script>


<script>
window.addEventListener('scroll', function(){

if (this.scrollY ==0){
  document.getElementById('bottomx').style.visibility = "hidden";
} else {
  document.getElementById('bottomx').style.visibility = "visible";
  }
}
)
</script>

You may see the effect here

Please scroll a bit from the top to see what happens

Additional Remark

In case you are actually not scrolling the body, but scroll a DIV (e.g. id=content), then you should

amend the JS to scroll the content, not the html/body
set the Event Listener to content

So, for your case, the following code will work:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="SeelenPuls">
<meta name="publisher" content="SeelenPuls">
<meta name="copyright" content="SeelenPuls">
<meta name="description" content="SeelenPuls - poetischer, naturverbundener Metal aus Oberösterreich">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SeelenPuls</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style_con.css">
<style type="text/css">
</style>
<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
</head>

<body>

<div id="center">
 <div id="navi"><ul class="menu">
<li><a href="index_de.php" title="Anfang">Anfang</a></li>
<li><a href="neues_de.php" title="Neues">Neues</a></li>
<li><a href="biografie_de.php" title="Biografie">Biografie</a></li>
<li><a href="diskografie_de.php" title="Diskografie">Diskografie</a></li>
<li><a href="downloads_de.php" title="Downloads">Downloads</a></li>
<li><span class="menuactive">Poesie</span></li>
<li><a href="fotografie_de.php" title="Fotografie">Fotografie</a></li>
<li><a href="kontakt_de.php" title="Kontakt">Kontakt</a></li>
</ul>
    </div>
  <!--Ende navi-->

     <div id="content"><H2><a href="poesie_de.php" class="class2">POESIE</a><span>&nbsp;< Neue Songtexte</span></H2>
<p>Test
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.

<div id="bottomx" style="position: fixed; width:100%; text-align:center; bottom: 20px; left: 20px; visibility:hidden;" onclick="javascript:xtop();">
<img src="img/toparrow.png" class="icons">
</div>
  
    
        </div>
  <!--Ende content-->

<div id="links"><A HREF="https://discord.gg/9uSxVwACAv" TARGET="newwindow"><IMG class="icons" SRC="img/logo_discord.png" BORDER="0" TITLE="Discord"></A>
<A HREF="https://seelenpuls.bandcamp.com" TARGET="newwindow"><IMG class="icons" SRC="img/logo_bandcamp.png" BORDER="0" TITLE="Bandcamp"></A>
<A HREF="https://www.facebook.com/SeelenPuls/" TARGET="newwindow"><IMG class="icons" SRC="img/logo_facebook.png" BORDER="0" TITLE="Facebook"></A>
<A HREF="https://www.instagram.com/seelenpuls.at/" TARGET="newwindow"><IMG class="icons" SRC="img/logo_instagram.png" BORDER="0" TITLE="Instagram"></A>
<A HREF="https://www.youtube.com/@seelenpuls" TARGET="newwindow"><IMG class="icons" SRC="img/logo_youtube.png" BORDER="0" TITLE="YouTube"></A>
<A HREF="https://soundcloud.com/seelenpuls" TARGET="newwindow"><IMG class="icons" SRC="img/logo_soundcloud.png" BORDER="0" TITLE="Soundcloud"></A>



 </div>
  <!--Ende links-->

<div id="version">
<a href="neues_de.php" title="Neues" class="class4">Vxx.y.24</a>
</div>
  <!--Ende version-->

<div id="zitat"><center></center>
  </div>
  <!--Ende zitat-->

<div id="language">
<b>DE</b>&nbsp;/&nbsp;<a href="index_en.php" title="English" class="class4">EN</a>
</div>
<!--Ende language-->

 <div id="footer"><a href="impressum/impressum.php" title="Impressum" class="class4" target="newwindow">&copy; 2024</a>
 </div>
  <!--Ende footer-->


</div><!--Ende center-->



  <script>

function xtop() {
  $( "#content" ).animate(
{ scrollTop: 0 }
    , "slow", function() {
    // Animation complete.
     document.getElementById('bottomx').style.visibility = "hidden";
  });

}
</script>


<script>
content.addEventListener('scroll', function(){


if (this.scrollY ==0){
  document.getElementById('bottomx').style.visibility = "hidden";
} else {
  document.getElementById('bottomx').style.visibility = "visible";
  }

}
)
</script>
  
  </body>

</html>

See the effect here

Answered By - Ken Lee

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday

Displaying back to top icon with JS if user has scrolled

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels