Experience a smooth horizontal scrolling effect by simply clicking on a link

I recently developed a webpage with horizontal scrolling functionality using this resource.

Now, I am attempting to add a menu bar that will scroll left to a specific div when clicked. Here is my code:

<!DOCTYPE html>
<html>
  <head>
    // Code for page header, styles, and scripts
  </head>
  <body>
    // Code for menu bar links and page content sections
    
    // JavaScript for handling hover effects and scrolling

    // jQuery script for horizontal scrolling functionality

    // jQuery script for smooth scrolling when clicking on menu links

  </body>
</html>

However, I am facing issues with the link not working when clicked. Can someone please assist me?

Additional details here

javascriptjqueryhtmlcsshorizontal-scrolling

Answer №1

You should consider making this adjustment

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});

Instead, modify it to change the top value to the left position value. Therefore, update scrollTop to position().left.

$('html, body').stop().animate({
'scrollTop': $target.position().left
}, 900, 'swing', function () {
window.location.hash = target;
});

Answer №2

Within your fiddle, all the content divs are positioned in the same place, causing the links to have no effect when clicked since each div is already visible.

Instead of relying on internal links typically used for vertical scrolling, have you considered triggering your JinvertScroll function on div link clicks? You can pass the width of the internal div as a parameter to achieve this.

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

The parent-child relationships in MongoDB

In my Meteor application, I have created two collections: ActivityCards and Users. Inside the ActivityCard collection, there is a reference to the User like this: { "_id" : "T9QwsHep3dMSRWNTK", "cardName" : "Guntnauna", "activitycardType" : 1 ...

javascriptmongodbmeteorcollections

Looking for assistance with CSS styling for an email design

I recently created an Email Template for one of our clients, but I am facing an issue. The color in the email shows up fine when I preview it in the system. However, once the email is received, the format remains intact but the colors disappear, turning th ...

htmlcss

Removing the "%20" code from URLs in your Django project

Currently, I am using Django 1.3 and implementing template inheritance. However, I have encountered an issue with the /static/ settings path once I navigate away from the home page. The problem arises when I load home.html, which inherits from base.html - ...

htmldjangodjango-templates

Gulp.js does not recognize Angular

I keep encountering an Angular error that says 'Angular is not defined'. I'm almost certain it has something to do with incorrect path configurations, but I'm at a loss. Here's my current folder structure: bower_components/ node_ ...

javascriptangularjsgulp

The JSON object, which has been converted into a string and sent over the network,

Attempting to set up a websocket server using TypeScript in Node.js, the following code was used: ws.on('message', (msg: string) => { console.log("got message:" + msg); const m = JSON.parse(msg); console.log(m); ...

javascriptjsontypescriptwebsocket

What is the best way to consistently apply parent transforms to child elements in the same sequence?

Within my software, users have the ability to select 3D objects on a workplane and then scale, move, or rotate these elements collectively using a "transformation" container. This container, represented by an Object3D, groups all transformations and applie ...

javascriptthree.js

What could be causing the axesHelper function to not display the axis on the screen?

I encountered an issue with my code while working with three.js. I am having trouble initializing certain components and objects such as the axis and cube, as they are not displaying on the screen. Can someone please help me identify where the error migh ...

javascriptthree.js

Tips for implementing JS function in Angular for a Collapsible Sidebar in your component.ts file

I am attempting to collapse a pre-existing Sidebar within an Angular project. The Sidebar is currently set up in the app.component.html file, but I want to transform it into its own component. My goal is to incorporate the following JS function into the s ...

javascripthtmlangulartypescript

Status of Google Sheets sidebar being opened or closed

I am currently seeking a method to monitor the status of the sidebar within Google Sheets. My understanding is that I can ascertain which sidebar HTML has been accessed by establishing a global variable before the HTML content is presented. Given that onl ...

javascripthtmlgoogle-apps-scriptgoogle-sheetssidebar

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

Here's the JSON data I'm currently working with: ?$where=camis%20=%2230112340%22 I plan to dynamically generate queries using different datasets, so the information will vary. My main objective is to categorize elements within this array into ...

javascriptarraysjsonsortingtypescript

Issue with Aligning Text Inputs and Images in Firefox

I am really struggling with this issue and it's driving me crazy. The problem lies with an image positioned at the end of a text input, styled using CSS. Here is the code snippet: .text_input{ background:url(../images/forms/text_input_back.png) t ...

cssfirefoxtextboxalignment

In the vue3 v-for loop, the type of 'Item' is considered to be 'unknown'

https://i.sstatic.net/irjFP.png Currently, I am facing an issue with a v-for loop in my Vue3 + TypeScript project. The error message keeps appearing despite following the correct syntax for passing props to a component. I have included the relevant code s ...

javascripttypescriptvue.js

React version 15.0.0 has phased out the renderToString method - what is the best approach for implementing server-side rendering now?

Hey there! Exciting news: React has a new release candidate, version 15.0.0. However, it seems that the renderToString method is now deprecated and will be discontinued in future versions. So, how can we continue to support server-side rendering with React ...

javascriptnode.jsreactjsversionserver-side-rendering

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

javascriptjqueryhtmlcss

Unlimited POST requests on Safari 7

I'm facing a challenging issue that has me stuck. I have a form where users submit their data, triggering a post ajax request. Upon success, I populate some data in a hidden form with an action pointing to the current subdomain URL, but actually redir ...

javascriptajaxformspostsafari7

Using Bostock's wrap method to format the text

In my current scenario, I am looking to add short to medium snippets of text in various parts of my visualization. However, the default behavior results in unattractive output as SVG text is simply appended all at once. After some research, I came across a ...

javascriptd3.jssvg

When the window is resized, elements overlap with one another

I need help with organizing the header section on my website, which includes: Logo Login and Register buttons Menu Language picker I want to display them all in a single row, but I'm having trouble as they overlap when I resize the window. Specific ...

cssbootstrap-4

What is the best way to navigate through images only when hovering?

I have a website that showcases a collection of images in a creative mosaic layout. Upon page load, I assign an array of image links to each image div using data attributes. This means that every image in the mosaic has an associated array of image links. ...

javascriptjqueryhtmlimageimage-gallery

How about trying out the magic of Bootstrap columns?

My issue pertains to bootstrap columns. Whenever I zoom in on the browser, the columns start overlapping and the text from col-md-7 ends up over the image. Does anyone know of a solution to this problem? <div class="row"> <div class="col-md-5 ...

htmlcssbootstrap-4

What is the most efficient way to redirect a GET request from the root in my app.js file to a route located within the controllers folder in Express.js?

I am attempting to replicate the functionality of a code snippet from Sinatra in Express. In my Node.js/Express.js application, I have set up an MVC structure and defined routes accordingly. My original route definition in `app.js` looked like this: app. ...

javascriptnode.jsexpress