prevent scrolling to a specific div

Question

prevent scrolling to a specific div

Hey, I'm facing a slight issue and need to prevent scrolling to the div after clicking on a link that targets the left div.

<div class="kafelki">
<div class="kafelki-img">
<div class="target">
<div id="m1">dasdasdasd m1</div>
<div id="m2">dadasdasdasd m2</div>
<div id="m3">sdasdasds m3</div>
<div id="m4">dasdasdsad m4</div>
<div id="m5">dasdasd m5</div>
<div id="m6">asdasdad m6</div>
</div>
</div>
<div class="kafelki-lista">
<ul>
<li><a href="#m1">dla firm produkcyjno-usługowo-handlowych</a></li>
<li><a href="#m2">dla biur rachunkowych</a></li>
<li><a href="#m3">dla sklepów</a></li>
<li><a href="#m4">dla moteli i gastronomii</a></li>
<li><a href="#m5">dla lekarzy i prawników</a></li>
<li><a href="#m6">dla jednostek publicznych</a></li>
</ul>
</div>
</div>

Check out the jsfiddle link here

html css

Answer 1

Answer №1

If you want to achieve a certain functionality in your code, consider using jQuery.

$(document).ready(function(){
    $('a').on('click', function(e){
        e.preventDefault();
    });
});

By targeting all a tags, the above code will likely do what you want. However, a better approach would be to assign a class to the specific links you don't want to activate the scroll. In order to do this, you should modify the line from:

$('a').on('click', function(e){

to

$('.className').on('click', function(e){

and adjust your HTML accordingly, for instance:

<li><a class="className" href="#m3">dla sklepów</a></li>

Answer 2

If you want to achieve a certain functionality in your code, consider using jQuery.

$(document).ready(function(){
    $('a').on('click', function(e){
        e.preventDefault();
    });
});

By targeting all a tags, the above code will likely do what you want. However, a better approach would be to assign a class to the specific links you don't want to activate the scroll. In order to do this, you should modify the line from:

$('a').on('click', function(e){

to

$('.className').on('click', function(e){

and adjust your HTML accordingly, for instance:

<li><a class="className" href="#m3">dla sklepów</a></li>

prevent scrolling to a specific div

Answer №1

Similar questions

When crafting an XPATH expression, I am able to navigate within the #document element. Within this element, I must specify the path to the HTML body of my web page

Which tools are best suited for Xamarin development?

What is the best way to initiate a new animation from the current position?

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

Is there a way to add a border around a div that extends beyond the div, similar to what

Gap in footer spacing on Internet Explorer is significantly large

Modifying css background in real-time based on the current weather conditions

Unleash the power of jQuery by incorporating the Ajax functionality with a hover option to enhance user interactivity. Utilize the .ajax

What is the best way to position four circles within a square container using CSS?

Tips for choosing a block using Puppeteer

Finding the nth-level children using JQuery

Can a new frame be created below an already existing frame in HTML?

Create a division element with an image that can be dragged around

Guide on displaying Adsense ads specifically for mobile devices

Zurb's Vertical Navigation Bar: A Stylish and Functional Design

Create a table that allows one column to have ample space, while ensuring that the other columns have uniform widths

How to Fix Items Being Pushed Down by 'Particleground' Jquery Plugin Due to Z-Index and Positioning

What is the best way to connect a line from the edge of the circle's outermost arc?

The issue of the hamburger icon appearing as "X" seems to only affect certain mobile phones, while it displays correctly on desktops and most other mobile devices. The problem appears to be specifically

Struggling to dynamically append additional textboxes to a <div> element using JavaScript