What is causing the page to automatically scroll upwards when a gallery thumbnail is clicked on?

Question

What is causing the page to automatically scroll upwards when a gallery thumbnail is clicked on?

Currently encountering some unusual behavior with my photo gallery. Whenever I click on a thumbnail to view an image, not only does the image display but it also causes the page to scroll up. If the gallery is positioned slightly below the top of the screen, it scrolls upwards. Conversely, if it extends beyond the top of the screen, it scrolls downwards until the top of the Gallery section aligns with the screen's top.

I attempted to recreate this issue on codepen: https://codepen.io/dmontesi/pen/VJZeVq. My code consists of SCSS and HTML only.

<!-- Gallery -->
<section class="wrapper">
    <div class="wrapper__gall">
        <ul class="slides">
            <li id="slide1"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" alt="" /></li>
            <li id="slide2"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" alt="" /></li>
            <li id="slide3"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" alt="" /></li>
        </ul>
        <ul class="thumbnails">
            <li>
                <a href="#slide1"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" /></a>
            </li>
            <li>
                <a href="#slide2"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" /></a>
            </li>
            <li>
                <a href="#slide3"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" /></a>
            </li>
        </ul>
    </div>
</section>

The goal is for the gallery to display the next slide without altering the user's position on the screen.

html css sass css-grid

Answer 1

Answer №1

( To view the complete code, visit: Codepen )

Question:

Why does clicking a navigation link scroll to the top of an image? How can this be prevented?

Answer:

When you click on a navigation link, it by default scrolls to the element with the corresponding ID, known as an anchor link.

To prevent this behavior, you can add onclick="event.preventDefault()", but this will disable the use of the CSS :target rule, resulting in the target image not being displayed prominently over other images.

Alternatively, you can utilize JavaScript to fully control the behavior.

Add an onclick handler to your navigation links:

<a href="#slide1"  onclick='navigate(event)'>

Create a JavaScript function called navigate that switches the 'active' class from the current active element to the clicked one:

function navigate(event){
  // Get the currently active element
  var active = event.target.closest(".wrapper").getElementsByClassName("active")[0];
  // Remove the 'active' class from the active element
  if(active) active.classList.remove("active");
  // Get the target element from the link
  var target = document.getElementById(event.target.closest("a").getAttribute("href").replace("#",""));
  // Add the 'active' class to the target
  target.classList.add("active");
  // Prevent the default link behavior
  event.preventDefault();
}

Define a CSS rule for the active image (replacing the li:target selector):

.slides li.active {
  z-index: 3;
}
.slides li:not(.active) {
  z-index: 0;
}

( For detailed code, please refer to: Codepen )

Answer 2

( To view the complete code, visit: Codepen )

Question:

Why does clicking a navigation link scroll to the top of an image? How can this be prevented?

Answer:

When you click on a navigation link, it by default scrolls to the element with the corresponding ID, known as an anchor link.

To prevent this behavior, you can add onclick="event.preventDefault()", but this will disable the use of the CSS :target rule, resulting in the target image not being displayed prominently over other images.

Alternatively, you can utilize JavaScript to fully control the behavior.

Add an onclick handler to your navigation links:

<a href="#slide1"  onclick='navigate(event)'>

Create a JavaScript function called navigate that switches the 'active' class from the current active element to the clicked one:

function navigate(event){
  // Get the currently active element
  var active = event.target.closest(".wrapper").getElementsByClassName("active")[0];
  // Remove the 'active' class from the active element
  if(active) active.classList.remove("active");
  // Get the target element from the link
  var target = document.getElementById(event.target.closest("a").getAttribute("href").replace("#",""));
  // Add the 'active' class to the target
  target.classList.add("active");
  // Prevent the default link behavior
  event.preventDefault();
}

Define a CSS rule for the active image (replacing the li:target selector):

.slides li.active {
  z-index: 3;
}
.slides li:not(.active) {
  z-index: 0;
}

( For detailed code, please refer to: Codepen )

What is causing the page to automatically scroll upwards when a gallery thumbnail is clicked on?

Answer №1

Similar questions

Is there a way to identify when a <td> element in a table is modified using JavaScript?

What is the best way to automatically close a modal box after submitting a form?

Confirming information in Bootstrap's pop-up modal dialog

How to achieve striped columns with Bootstrap 4.0 instead of striped rows

Utilizing React JS Styled-Components to Import Images from the Public Directory

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

What is the best way to extract the name from JSON data?

Chrome does not support top.frames functionality

Troubles with showcasing icons on a website

How to dynamically modify a list box with JavaScript

Challenge with Making Backgrounds Responsive on Android Chrome

Navigate to a different page using a sliding transition

Adjusting Navigation bar size according to the Media Screens/Device Width

Guide to populating a select-option dropdown using CSS

Can anyone help me troubleshoot this issue with uploading external JS scripts into my HTML code?

Show all information from MySQL tables in an HTML format

Task: Choose MySQL option and Retrieve JSON data

Facing challenges when attempting to store data with find() on Internet Explorer

Swap out a term in a sentence with an interactive span element in real-time

How can I dynamically populate a multiple select box with data from a PHP query and store it in a multidimensional array using jQuery?