Require the implementation of seamless scrolling when clicking on an anchor tag with a specific ID, as opposed to the abrupt jumping to the corresponding

<div id="slider">
    <div id="pro1"></div>
    <div id="pro2"></div>
    <div id="pro3"></div>
</div>

<div id="thumb">
    <a href="#pro1"> <img id="tpro1" src="projects/tpro5.jpg" style="height: 100%;"></a>
    <a href="#pro2"> <img id="tpro2" src="projects/tpro5.jpg" style="height: 100%;"></a>
    <a href="#pro3"> <img id="tpro3" src="projects/tpro5.jpg" style="height: 100%;"></a>
</div>

I have been working with this code and when I click on the link, it jumps straight to that specific div. Instead, I would like to have some animated horizontal scrolling to display that div.

Thank you!

javascriptjquerycsshtml

Answer №1

Have you already found a solution to the problem?

Hey, I tried this method and it worked for me, so I believe it could work for you too ;) You don't even need the < a > element.

$("#thethingyougonnaclick").click(function() {
    $('html, body').animate({ scrollTop:$("#theelementidtoscroll").offset().top}, 500);
});

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

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...

htmlcsstwitter-bootstrapbootstrap-4

Jquery form calculation not matching up

I've been struggling to make this jQuery math function work with my form. The snippet works fine, but when I try to integrate it into the actual form, I can't seem to get it aligned properly to perform the required calculations. Any suggestions ...

javascriptjqueryhtml

Examining pseudo-elements on Internet Explorer

Recently, I encountered an issue with a pseudo-element: input[type=radio].selected::before Surprisingly, in Internet Explorer, the pseudo-element wasn't visible at all. This prompted me to investigate further. Upon inspecting the selector (imagi ...

css

The usage of CSS pseudo elements with the position absolute property

To allow for the opacity of an image to be changed without affecting the parent container's opacity, I added the image as a pseudo-element. The position of the pseudo-element is set to absolute and relative to the parent to position it inside the p ...

htmlcsscss-positionpseudo-element

Prevent the unwanted 100 Continue behavior in Ajax requests

My Javascript application sends out large POST requests to a backend server. Due to the fact that we need all requests directed to our non-public endpoint and the load balancer/proxies struggle with the Expect: 100-Continue header, I am seeking a way to pr ...

jqueryajaxhttp

Modify the table layout by incorporating images within separate div containers for each row

In my layout, there is a grey box element that contains a table with rows of small images. I want the table to automatically adjust based on the number of images so that when the grey box reaches its maximum size, the images move to the next row. Is this a ...

htmlcsshtml-tablegrid-layout

Quirks and nuances when using p5's pixel fill function

I am currently utilizing the p5.js library to work on a program that is designed to automatically fill closed spaces. However, I am encountering an issue where the program sometimes fills half-closed loops for reasons unknown to me. If anyone could provide ...

javascriptp5.js

Tips for including an additional class in an element

I have an image tag with the "kiwi" class, and another class that makes it spin. I want to toggle this second class (called 'elem') when clicking on the play button of my music player. Here is the image tag with the class: <img src="./im ...

javascripthtmlcss

I wish to simply click on a browser link without the need to open a new tab

Is there a way to programmatically open a link or all links on a website in the same browser without manual clicks or keyboard commands? Essentially, I am looking to automate the process of opening a specific link within a website without the need for an ...

htmldomhyperlinkbrowser-extension

Angular 4 - The Promising Outcome: How to Retrieve the Value upon Completion

Is there a way to retrieve a value from a promise and store it in a global variable? I've been attempting to accomplish this, but the global variable remains undefined. import { Injectable } from '@angular/core'; import {ActivatedRouteSnap ...

javascriptangular

Is there a PHP script available to verify the status of FTP servers and determine if

I am in need of creating a PHP script that is triggered by a setInterval("ajaxrequest('ftp.php', 'context')", 1000) function. The PHP script itself is quite simple. It consists of an array containing FTP addresses. The script loops thro ...

phpjavascriptajax

Using the splice method on an array is only effective when done in a specific sequence

I've encountered a small issue. I have checkboxes that correspond to different divs, and when checked, the name of the div is sent to the server. However, when unchecking the checkboxes in a specific order, the array doesn't update correctly. $ ...

javascriptarraysangularjsstringcheckbox

My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and event ...

htmlcssbootstrap-4grid-layout

Transmit information to the server via an AJAX request

$.ajax({ url:"http://192.168.0.74:8080/pimsdesign/JSONRequestHandler" , type: "POST", data: {name: "amit", id:1 }, dataType: "json", beforeSend: function(xhr) { if (xhr && xhr.overrideMimeType) { xhr.overrideMimeType("application/json;charset=UTF-8 ...

javascriptajaxjquerycordova

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

The jQuery code stops functioning once the identical HTML content is loaded through AJAX

Before you mark my question as a duplicate, I have already attempted the solutions provided by similar issues, but unfortunately none of them have resolved my problem. Here is my specific issue: I am working with a fragment that includes the following inpu ...

htmlajaxjqueryevent-handling

Step-by-step guide to creating a dynamic button that not only changes its value but also

I am trying to implement a translation button on my website that changes its value along with the text. Currently, I have some code in place where the button toggles between divs, but I am struggling to make the button value switch as well. Given my limit ...

javascriptjqueryhtmlcss

AJAX request receives a Flask 404 response

I'm currently facing a challenge in getting my Flask application to properly handle a straightforward AJAX request. The issue seems to be related to sending the request to the correct address. Within my app.py file, I've set up a basic route and ...

jquerypythonajaxflask

What could be the reason for the failure of Angular Material Table 2 selection model?

A Question about Angular Mat Table 2 Selection Model Why does the selection model in Angular Mat Table 2 fail when using a duplicate object with its select() or toggle() methods? Sharing Debugging Insights : Delve into my debugging process to understand ...

javascriptjqueryangularangular-material2multipleselection

The function document.getElementById is unable to select multiple elements simultaneously

I've been tackling a loading issue. I have a visible div, #loading, and multiple hidden divs, #message. I also have a JavaScript function. function loading() { setTimeout(function() { document.getElementById("loading").style.display = " ...

javascriptjqueryhtmlcss