Stop vertical scrolling in browser when a link with the href "#divID" is clicked

At the center of my webpage, I have a small menu. When you click on a button, it should smoothly scroll horizontally to the chosen content. However, when clicking, the entire window scrolls, making the menu disappear from view. The issue is illustrated here:

Below is the code segment that needs modification and implementation:

<div id="left">
<a href="#target1" class="panel">Target 1</a><br/>
<a href="#target2" class="panel">Target 2</a><br/>
<a href="#target3" class="panel">Target 3</a><br/>


<div id="right">
<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>

Incorporate some jQuery script to enable smooth sliding from #left to #right.

View the functioning demo here:

http://jsfiddle.net/codeSpy/KyV6L/

javascriptjqueryhtmlcssscroll

Answer №1

When clicking on a link with the ID symbol (#), the default behavior is to navigate to the specified ID on the page. To stop this default action, you can use the following code:

$('a.panel').click(function(e) {
    e.preventDefault();

    /* add your custom function here */
});

Answer №2

To prevent the default behavior of a click event, you can use either return false or preventDefault():

$('a.panel').click(function(e) {
    e.preventDefault();
    // ...
};

Answer №3

To stop the default behavior of a click event, make sure to use the preventDefault() method:

$('a.tab').click(function(e) {
    e.preventDefault();
    ...
});

Answer №4

Using this code snippet, I was able to achieve a layout where vertical scrolling is disabled while still allowing for horizontal scrolling.

$('a').click(function(e) {
var link = $(this).attr("href");
$('html,body').animate({scrollTop: 0});});

Answer №5

The issue you seem to be encountering could stem from the hrefs you are utilizing. Since they are real URLs, they attempt to navigate (scroll) to the anchors specified with the #'s. Because these anchors do not exist, the page will automatically scroll to the top of your website.

Consider using IDs as attributes instead, or following the advice provided by other responses to prevent the default action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am currently utilizing react-admin, however, I am encountering an issue with the heavy build causing errors

Currently, I am working on developing the frontend using react-admin. Initially, I intended to utilize NextJS and found a helpful reference article. Reference: When attempting to run next dev, everything worked smoothly without any errors. However, when ...

javascriptreactjsnode.jsnext.jsreact-admin

The functionality of the Bootstrap toggle button seems to be malfunctioning

I'm having trouble with the toggle button in my Bootstrap code. When I resize the window, the toggle button appears but clicking on it doesn't do anything. This is my first time using Bootstrap, so I might have made some silly mistake. Any assist ...

javascriptjquerytwitter-bootstrapdrop-down-menutoggle

Vue dropdown component mistakenly triggers event on incorrect element

Utilizing the incredible Vue Multiselect component for my project. Incorporated 8 dropdown multi-select elements into my form structure. A peculiar issue arises when an option is chosen from the second dropdown - it triggers the onSearchResellerCompanies ...

javascriptjqueryhtmlvue.js

Implementing JavaScript validation to alter the background image

I encountered a small issue while working on my project. I was designing a form in HTML using JavaScript, and for the input fields, I decided to use a background image with padding on the left to enhance its appearance. Everything seemed fine until I ran i ...

javascripthtmlcss

What is the best way to set the state to false upon unmounting a component in react?

Currently, I am controlling the state of a dialog using context. Initially, the isOpen state is set to false. When the add button is clicked, the state isOpen becomes true and clicking the cancel button will revert it back to false. If the user does not c ...

javascriptreactjs

Enhancing User Interactivity with JQuery Ajax Voting

Currently, I am referencing a JQuery Ajax Voting system guide to help me set up a similar system. However, I have concerns about the security aspects of this guide. As it stands, the guide simply stores the ID of an item and its corresponding voting statis ...

phpajaxsecurityjquery

Pass a PHP variable to a jQuery dialog box

I have a table populated with images and corresponding information. Each image has an 'add' button next to it, which triggers a jQuery dialog() with the id="alignment" when clicked. My goal is to pass a PHP variable (containing the image name) so ...

phpjquery

Is it conceivable that Rails may be rendering HTML at a slower rate compared to static

When using a Rails layout, you can include HTML tags to render images like this: <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> This will generate the following HTML code: <img alt="Sample App" class="round" src="/i ...

htmlruby-on-railsrubylayoutrendering

What is the method to retrieve an object by using a variable containing a string?

I am facing an issue with linking object names and anchor titles in my code. I want to store the title of an anchor element clicked by the user in a variable called sprite, which should then correspond to the name of an object. Here is the current version ...

javascripthtml

In Typescript, object properties make assertions about other properties within the object

I have a specific object that I use to store data received from an API. This object is structured as follows: class Storage { isReady: boolean = false; content: object || null = null; } I have noticed that when isReady is false, content is null. Con ...

javascripttypescript

Ways to implement a fixed navigation bar beneath the primary navbar using ReactJS

Utilizing ReactJS, I am endeavoring to create a secondary (smaller) navbar in the same style as Airtable's product page. My primary navbar is situated at the top and transitions from transparent to dark when scrolled. The secondary bar (highlighted in ...

javascriptreactjsmaterial-ui

Using Vue.js to summon a method from within a data property in a component

Can component methods be assigned to data variables using the example code below? It seems it is not working correctly. What could be the right way to do this? <li v-for="item in items" @click="item.action"> {{ item.title }} ...

javascriptvue.jsvuejs2vue-component

What is the syntax for utilizing cookies within the `getServerSideProps` function in Next.js?

I am struggling to pass the current language to an endpoint. Despite attempting to retrieve the language from a Cookie, I keep getting undefined within the getServerSideProps function. export async function getServerSideProps(context) { const lang = aw ...

javascriptcookiesnext.jsserver-side-rendering

Professional electronic publication viewer

I am currently working on developing a sophisticated ePub reader utilizing jQuery and PHP/Zend Framework1.12 to support the epub3.0 format. The reader is intended to offer the following functionalities: Display books in pages (2 pages displayed at a time ...

phpjqueryepub

Utilize Jquery to trigger Controller Action

My goal is to refresh a specific 'div' when a user adds an item to the shopping cart. I have some jQuery code that should execute on the click event. It should trigger a post action (which is functioning correctly) and then reload everything with ...

jqueryajaxasp.net-mvc

Issue with Electron: parent window not being recognized in dialog.showMessageBox() causing modal functionality to fail

Struggling with the basics of Electron, I can't seem to make a dialog box modal no matter what technique I try. Every attempt I make ends in failure - either the dialog box isn't modal, or it's totally empty (...and still not modal). const ...

javascriptnode.jselectron

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

Comparison of utilizing PHP within CSS versus Implementation through JavaScript [General]

Curious about the incorporation of PHP in CSS, especially in relation to my current Wordpress Theme project. I am aiming for high levels of customization and have been using a JS file to change CSS Properties through PHP. However, I'm not entirely con ...

javascriptphphtmlcsswordpress

Conflicting media queries

Attempting to resolve the issue of site content overlapping with the background slider plugin on a WordPress website, I have encountered conflicting media queries for different devices. While it may work perfectly on mobile devices, it can create problems ...

cssmedia-queries

A variable named "quid" has been set with a value of "x" in the session scope

I am trying to figure out how to set a parameter x in JSTL for a function I have, but when I input values as "x" it returns as a string. JS: function updateValue(x) { <q:set var="quid" value="x" scope="session"/> } HTML ...

javascriptjavaspringhibernatejstl