How to create a smooth scroll effect to a specific section using an <a>

Currently studying web design, I am working on creating a parallax website. I have managed to slow down the scrolling background in certain areas, but I want to enhance it by adding buttons in the header that will smoothly scroll the page to a specific Div section instead of instantaneously jumping to it.

Here is the HTML for my header:

<header>
    <h1>Stalwarts</h1>
    <div id='taskbar'>
        <a href="#p" class="scrollTo">Go to section 1</a>
        <a href="#d" class="scrollTo">Go to section 2</a>
        <a href="#t" class="scrollTo">Go to section 3</a>
        <a href="#q" class="scrollTo">Go to section 4</a>
    </div>
</header>

Here is the CSS code I am using:

header{
position: fixed;
padding-top: 0.4%;
padding-bottom: 0.4%;
top: 0;
width: 100%;
height: auto;
z-index: 55;
}

I would like guidance on how to implement JS or JQuery to achieve the smooth scrolling effect and how to integrate it into my project. If any plugins are necessary, I would appreciate instructions on how to install them as I am relatively new to JQuery and JS!

Thank you, Christophe

javascriptjqueryhtmlcssscroll

Answer №1

Just searched for "jquery parallax scrolling" on Google and stumbled upon this gem:

Answer №2

If you are already using jquery, you have the option to utilize the $.animate function. For instance:

$('html, body').animate({
    scrollTop: $(".section").eq(sectionIndex).offset().top
}, 2000);

Check out this sample in action on jsfiddle.

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

Issue: The element [undefined] is not recognized as a valid child of the <Routes> component. Only <Route> or <React.Fragment> components are allowed as children of the <Routes

I am facing an issue while trying to upgrade react-router-dom from v5 to v6. The error message I receive is as follows: Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragm ...

javascriptreactjsreact-routerreact-router-dom

I am currently exploring options on how to eliminate the excess space at the top of the screen when viewing on smaller devices like mobile phones and tablets

Utilizing bootstrap for my layout, I have a row with 4 columns where the content within each div has varied top margins. This creates a cascading effect and looks great on desktop screens. However, the issue arises when viewing it on smaller screens as the ...

htmlcssbootstrap-4

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

Encountering difficulties with the functionality of Google Places API

I am attempting to incorporate the autocomplete functionality of Google Places API into a text field. Below is the code I have implemented: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script ...

javascripthtmlgoogle-maps-api-3

How can I access the value of a textbox within a dynamically generated div?

In my project, I am dynamically creating a div with HTML elements and now I need to retrieve the value from a textbox. Below is the structure of the dynamic content that I have created: <div id="TextBoxContainer"> <div id="newtextbox1"> // t ...

javascriptjqueryhtml

The combination of Django 1.7, postgresql, jquery datatables, and the issue of connections not being properly released

As I work on developing a webpage that utilizes jquery DataTables, django 1.7, and postgresql, I encountered an issue with the database connections. Despite setting up my DataTables to interact with my django backend (with serverSide option set to true), I ...

pythonjquerydjangopostgresqldatatables

Starting jQuery on embedded websites

I developed a platform that relies on JavaScript. Users of my platform are required to paste a code similar to Google Analytics, which automatically deploys a custom set of JavaScript functions along with the latest jQuery 1.9 through Google. The issue I ...

javascriptjquery

Using javascript to determine the vertical position of an element within a fixed container

I'm facing a challenge in determining the vertical position of an element using scrollTop when the parent container has a position: fixed. When I use scrollTop, it consistently returns a value of 0. This probably occurs because the element is no long ...

javascripthtmlcss

The Angular 1.x Ajax request is not triggering the expected update in the view

I am encountering an issue with my Angular application where the data retrieved from a JSON file is not updating in the view when the JSON file is updated. It seems like the JSON file and the view are out of sync. As a newcomer to Angular, I am struggling ...

javascriptangularjsjsonajax

Utilize Javascript ES6 to Sort Through Data in a Table

I require assistance with my project using Material UI and React. There are two key implementations that I need: I am looking to create a filtering system for all rows in each column as shown in the attached image. Additionally, I need a button that can a ...

javascriptreactjsreact-reduxmaterial-ui

What is the best way to obtain a unique result for a single cell without encountering any duplicates when using the Angular

Currently, I have functional code that successfully passes data from a dialog window to a table. Everything works fine for a single row, but when I try to add multiple rows to the table, I get results for several columns simultaneously. Is there a way to o ...

javascriptangularjsangularjs-materialmddialog

Showing error message when utilizing the search bar and autocomplete feature (material design CSS)

I'm having difficulty setting up a materialize search bar () with autocomplete functionality () on my website. The issue I'm facing is that the autocomplete feature seems to affect the display of the search icon. When doing a "select all," it be ...

htmlcssfrontendmaterialize

asp.net listview displaying modal image pop-up

Hello, I am currently attempting to create a pop-up display of an image within a listview using object data source. My goal is to have a pop-up appear with the respective image when clicking on the image in each row. The issue I am facing is that only th ...

jqueryasp.netlistviewpopup

Modify the status of the variable specified within the ng-repeat loop from the controller perspective

Is it possible to modify the value of a variable declared in ng-repeat from the controller? I am attempting to set an initial value for a basic variable called "opened" which is used for toggling within an ng-repeat, directly inside the controller. <d ...

javascriptangularjstoggleangularjs-ng-repeat

My intention is to ensure that the page is printed with the Background graphics checkbox pre-checked

When using the print button, I typically include the following code: onclick="window.print();" I also came across this code snippet to set a checkbox as checked by default: <style type="text/css" media="print"> * { -webkit-print-color- ...

javascripthtmljquerycssjquery-plugins

encasing a container element around every trio of elements

I'm currently working on grouping every 3 divs with a class of search-audio inside a div with a class of slide. The issue I'm facing is that it's giving me an error stating that elem.parentElement is undefined... However, the initial part ...

javascriptarraysforeachparent-child

Breaking down objects or arrays to extract specific values in React components

Some articles recommend using ES6 destructuring for React props & state as a best practice. For example: const { showModal, hideModal } = this.props; While I understand the benefits of cleaner code, I recently discussed with another developer who suggest ...

javascriptecmascript-6

Obtain a string in JSON format upon clicking in Angular 2

I am working on extracting the title from a json response using a click event. Currently, I can retrieve all the titles when the button is clicked, but I am looking for a way to obtain a specific title based on the button or a href that the user has clicke ...

javascriptjqueryjsonangular

Fixed header in a div, allowing content to scroll when hovering over the header

How can I ensure that the header remains fixed at the top while allowing the content to scroll when hovered over? The current issue is that when a user hovers over the header and tries to scroll, the content does not move. body { margin: 0; ...

htmlcssvue.jssass

Unexpected behavior: getElementById returning URL instead of element

I created a function that accepts a thumbnail path as an argument, waits for the bootstrap modal to open, and then assigns the correct path to the thumbnail href attribute within the modal. However, when I use console.log with the element(el), it displays ...

javascriptjquerytwitter-bootstrap