Disable prevent Default for ancor 'a' tag

user_11134042 0
Viewed 181

I have scroll div image like this

enter image description here

HTML CODE

<div class="side">
      <div class="data" id="data-1">
        <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
        <span> ID = data-1</span>
        <hr>
      </div>
      <div class="data" id="data-2">
        <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
        <span> ID = data-2</span>
        <hr>
      </div>
      ...
   </div>

CSS CODE

.side{
      display: block;
      background: salmon;
      width: 350px;
      height: 100vh;
      overflow: auto;
    }
.side img{
      display: block;
      padding: 10px;
      width: 150px;
      height: 150px;
      object-fit: cover;
      object-position: center;
    }

every image have a unique id like id='data-1'

and then below that, I have a link to go to each image HTML CODE

<div>
      <ul>
        <li>
          <a href="#data-1">Link to image id data-1</a>
        </li>
        <li>
          <a href="#data-2">Link to image id data-2</a>
        </li>
        <li>
          <a href="#data-3">Link to image id data-3</a>
        </li>
        <li>
          <a href="#data-4">Link to image id data-4</a>
        </li>
        <li>
          <a href="#data-5">Link to image id data-5</a>
        </li>
      </ul>
    </div>

by default when I click a link I the windows page is going top. that's what I want to avoid

and the result I want is the data is still on the top of the div scroll page, but the windows page is not going to anywhere

css html jquery javascript
2 Answers

If you want to prevent the default behaviour of the anchor tag then you need to bind click event to anchor tag and call event.preventDefault().

$('a').click(function(event){
    event.preventDefault();
})
.side{
  display: block;
  background: salmon;
  width: 350px;
  height: 100vh;
  overflow: auto;
}
.side img{
  display: block;
  padding: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side">
    <div class="data" id="data-1">
        <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
        <span> ID = data-1</span>
        <hr>
    </div>
    <div class="data" id="data-2">
        <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
        <span> ID = data-2</span>
        <hr>
    </div>
    ...
</div>
<div>
    <ul>
        <li>
          <a href="#data-1">Link to image id data-1</a>
        </li>
        <li>
          <a href="#data-2">Link to image id data-2</a>
        </li>
        <li>
          <a href="#data-3">Link to image id data-3</a>
        </li>
        <li>
          <a href="#data-4">Link to image id data-4</a>
        </li>
        <li>
          <a href="#data-5">Link to image id data-5</a>
        </li>
    </ul>
</div>

user_62941280

First Method

To add return false in onclick() method of button.

 <a href="#data-1" onclick="return false">Link to image id data-1</a>


.side{
  display: block;
  background: salmon;
  width: 350px;
  height: 100vh;
  overflow: auto;
}
.side img{
  display: block;
  padding: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}
<div class="side">
  <div class="data" id="data-1">
    <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
    <span> ID = data-1</span>
    <hr>
  </div>
  <div class="data" id="data-2">
    <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    <span> ID = data-2</span>
    <hr>
  </div>
  ...
</div>

<div>
  <ul>
    <li>
      <a href="#data-1" onclick="return false">Link to image id data-1</a>
    </li>
    <li>
      <a href="#data-2" onclick="return false">Link to image id data-2</a>
    </li>
    <li>
      <a href="#data-3" onclick="return false">Link to image id data-3</a>
    </li>
    <li>
      <a href="#data-4" onclick="return false">Link to image id data-4</a>
    </li>
    <li>
      <a href="#data-5" onclick="return false">Link to image id data-5</a>
    </li>
  </ul>
</div>

Second Method

To add event.preventDefault() in onclick() method of button.

 <a href="#data-1" onclick="event.preventDefault()">Link to image id data-1</a>


.side{
  display: block;
  background: salmon;
  width: 350px;
  height: 100vh;
  overflow: auto;
}
.side img{
  display: block;
  padding: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}
<div class="side">
  <div class="data" id="data-1">
    <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
    <span> ID = data-1</span>
    <hr>
  </div>
  <div class="data" id="data-2">
    <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    <span> ID = data-2</span>
    <hr>
  </div>
  ...
</div>

<div>
  <ul>
    <li>
      <a href="#data-1" onclick="event.preventDefault()">Link to image id data-1</a>
    </li>
    <li>
      <a href="#data-2" onclick="event.preventDefault()">Link to image id data-2</a>
    </li>
    <li>
      <a href="#data-3" onclick="event.preventDefault()">Link to image id data-3</a>
    </li>
    <li>
      <a href="#data-4" onclick="event.preventDefault()">Link to image id data-4</a>
    </li>
    <li>
      <a href="#data-5" onclick="event.preventDefault()">Link to image id data-5</a>
    </li>
  </ul>
</div>

For more information about Preventing browser actions.

user_133686580
Related