What can I do to prevent an anchor link from automatically scrolling to a different section of the page?

Question

What can I do to prevent an anchor link from automatically scrolling to a different section of the page?

I've been attempting to prevent a page from scrolling after selecting an anchor link.

Currently, the page layout includes a larger version of an image appearing in full view on the right panel after clicking on an image in the left panel (with text underneath). This specific look is required for the page. I initially thought using anchors would be the best approach, but I am open to other suggestions.

https://i.sstatic.net/Oeoit.png

I tried using

I have also experimented with various JavaScript methods such as e.preventDefault(), e.stopPropagation(), and return false. However, using return false simply disables the link entirely.

Here is an example of a thumbnail image button with an anchor link placed within a div that has a scrollbar set to overflow: scroll, alongside similar thumbnail images:


              <div class="col-lg-6 col-md-4 col-6">
                  <a href="#alexandru-zdrobau-200768-unsplash" class="d-block mb-4 h-100">
                        <img class="img-fluid img-thumbnail" src="Fashwell/ImagesFashwell/alexandru-zdrobau-200768-unsplash.jpg" alt="">
                  </a>
              </div>

And here is an image containing an anchor, also surrounded by a div with a scrollbar among other images:


<div class="output" id="alexandru-zdrobau-200768-unsplash">
                <h1>
                  Alexandru Zdrobau
                </h1>
                <img class="img_output" src="Fashwell/ImagesFashwell/alexandru-zdrobau-200768-unsplashBOX.jpg">
              </div>

            .....

              <li style="color:green">
                    <span style="color:green">
                      Category: Jumpers &amp; Cardigans.
                      <a href="https://www.zalando.co.uk/aaiko-trilly-jumper-aa321i02m-c11.html" style="color:green" target="_blank">
                        Best match: Aaiko Trilly Jumper
                      </a>
                    </span>
              </li>
         ....

Find below some JavaScript attempts to stop the scrolling:


$("a[href^='#']").click(function(e){
     e.stop();
});


$('.d-block mb-4 h-100').click(function(event) {

    event.preventDefault();

    return false;

});


$(".d-block mb-4 h-100").click(function (event) {
  event.stopPropagation()
})

Any suggestions or ideas? Thank you!

jquery html css anchor

Answer 1

Answer №1

One approach is to surround the gallery position with HTML anchors so that when a user clicks, the browser jumps to that location:

<a id="alexandru-zdrobau-200768-unsplash"></a>

Create all the necessary anchors in this manner. This way, the browser will smoothly navigate to the anchor's position without affecting the gallery JavaScript code.

Another option involves modifying the gallery's code to recognize the URL hash (anchor in the URL) and replacing links with href="javascript:thatfunction('anchor')". Please provide details about the code or gallery you are using for further guidance on this method.

If you prefer an event-controller solution as proposed, ensure that the click events controllers you defined are actually being called. If not, there may be no elements matching the jQuery selectors during setup.

To address this issue, you can:

Delay your event controller setup (not ideal but necessary sometimes)...
Implement a global body event controller to determine which events should be prevented by analyzing the event.target property, which identifies the DOM element triggering the event. Check if it's the "a" tag or its parent element (to handle cases where children trigger the event). If this doesn't work, consider using mousedown/touch events instead.

Answer 2

One approach is to surround the gallery position with HTML anchors so that when a user clicks, the browser jumps to that location:

<a id="alexandru-zdrobau-200768-unsplash"></a>

Create all the necessary anchors in this manner. This way, the browser will smoothly navigate to the anchor's position without affecting the gallery JavaScript code.

Another option involves modifying the gallery's code to recognize the URL hash (anchor in the URL) and replacing links with href="javascript:thatfunction('anchor')". Please provide details about the code or gallery you are using for further guidance on this method.

If you prefer an event-controller solution as proposed, ensure that the click events controllers you defined are actually being called. If not, there may be no elements matching the jQuery selectors during setup.

To address this issue, you can:

Delay your event controller setup (not ideal but necessary sometimes)...
Implement a global body event controller to determine which events should be prevented by analyzing the event.target property, which identifies the DOM element triggering the event. Check if it's the "a" tag or its parent element (to handle cases where children trigger the event). If this doesn't work, consider using mousedown/touch events instead.

Answer 3

Answer №2

Consider Using href="JavaScript:void(0)" Over href="#"

As an illustration :

<a href="JavaScript:void(0);">Click Here!</a>

Answer 4

Consider Using href="JavaScript:void(0)" Over href="#"

As an illustration :

<a href="JavaScript:void(0);">Click Here!</a>

Answer 5

Answer №3

Just wanted to share that I was able to solve the problem I was experiencing. Originally, I was utilizing the scrollIntoView() function in my JavaScript code to display images in the right-hand box. However, after switching to scrollToTop() instead, the unexpected scrolling of the entire page when clicking on an image in the left panel ceased.

Answer 6

Just wanted to share that I was able to solve the problem I was experiencing. Originally, I was utilizing the scrollIntoView() function in my JavaScript code to display images in the right-hand box. However, after switching to scrollToTop() instead, the unexpected scrolling of the entire page when clicking on an image in the left panel ceased.

What can I do to prevent an anchor link from automatically scrolling to a different section of the page?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to send a multi-dimensional array using jQuery ajax?

JavaScript button mouse enter

When elements are arranged side by side without using floats, the alignment at the top is not correct

Counting checkboxes in jQuery version 1.9

The .AppendChild() method does not appear to be working as expected following the completion of

The dropdown feature on my theme seems to be malfunctioning on Wordpress

Utilize JSON data fetched from a URL to dynamically populate an HTML content

Guide on extracting the ID within a for loop and incorporating it into a Vue.js function

Regularly fetching images from PHP page

Tips on Handling Multiple Versions of jQuery

Using localized strings in Spring and jQuery validation: Best practices

Creating a Form with Dynamic HTML when Button is Clicked

Using jQuery to evaluate multiple conditions within an if statement

Navigating URLs with Ajax Requests in CakePHP

Exploring HTML5 using QXmlQuery

In Angular, what is the best way to change the format of the timestamp '2019-02-22T12:11:00Z' to 'DD/MM/YYYY HH:MM:SS'?

Create a custom navigation bar using PlayFramework for a unique video streaming website

Unable to accommodate additional space, InputGroup is not utilizing the

What is the best way to allow someone to chain callback methods on my custom jQuery plugin?

Adjust jqGrid dimensions automatically as browser window is resized?