Guide on Creating a Smooth jQuery Scroll Animation from Top to Bottom and Bottom to Top for a Landing Page Navigation Menu

I'm in the process of developing a landing page website where my navigation links smoothly scroll to different sections on the page. Currently, when I click on a nav link, it instantly takes me to the bottom and then back to the top. However, I want to add jQuery animation to make this scrolling effect slow and smooth. Please take a look at my code snippet below and let me know if you see any errors or improvements that can be made. Thank you.

// Smooth Scrolling nav links
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top,
        scrollBottom: target.offset().bottom
    }, 1000);
} });

Answer №1

Your code is functioning correctly, but you just missed adding a comma after target.offset().top

To see a demonstration, check out this link: https://jsfiddle.net/L02tck8x/

Answer №2

Give this method a shot!

Using HTML:

 Link: <a href="#bottomSection" class="scrollDown">Scroll to Bottom &darr;</a>
 Target: <a name="bottomSection"></a>

 Link: <a href="#topSection" class="scrollUp">Scroll to TOP &uarr;</a>
 Target: <a name="topSection"></a>

And JS:

$('.toTop').click(function(){
  $("html, body").animate({ scrollTop: 0 }, 600);
  return false;
});
$('.toBottom').click(function(){
  $('html,body').animate({scrollTop: $(document).height()}, 600);
  return false;
});

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

Prevent memory leakage by utilizing Angular's $interval feature in countdown processes

I have a controller set up to handle a countdown feature: var addzero; addzero = function(number) { if (number < 10) { return '0' + number; } return number; }; angular.module('theapp').controller('TematicCountdownCo ...

Error: Attempting to access 'scrollTop' property of null object in Material UI library

After updating from MUI-4 to MUI-5, I encountered this error. Can anyone provide assistance? ...

Is it possible to customize the styling of certain fundamental MUI components using makeStyles?

:D This is my first time embarking on a project from the ground up using react and MUI. I've been curious if I have set it up correctly. My goal right now is to incorporate some styling using makeStyles for certain components provided by Material UI ...

using jquery to fill in fields in a table form

I am currently working with a basic html table that initially has two rows, each containing 2 form fields. Users have the ability to add more rows to the table by following this process: $('a#addRow').click(function() { $('#jTable tr:la ...

The MUI snackbar element lingers in the DOM even after it has been closed

Having created a global modal with the intention of only utilizing it when necessary, I've encountered an issue where the snackbar div persists in the DOM. This persistence is causing certain elements to become blocked as they appear beneath this div. ...

Specifying file types in an HTML upload form

Is there a way to restrict my form so that it only allows jpeg files? Currently, it is displaying all types of files. <input name="image" type="file" /> Also, are there any JavaScript functions available for showing progress? ...

Using AngularJS to bind models to a multidimensional array

As I am new to angular js, please bear with me. In my view, I have a grid of text input boxes that I would like to map to a 2D array in my controller or something similar in java script. The code in my view is as follows: <div ng-repeat="row in [1,2,3, ...

Preventing the use of fixed positioning on a navigation bar with the CSS filter property

I successfully created a fixed navigation bar that worked perfectly on my webpage. However, when I added a filter (brightness) to an image on the page, the navigation bar disappeared. I tried various solutions including using pseudo-elements and adjusting ...

Access a PHP file using XMLHttpRequest to run additional JavaScript code

My main page, referred to as Main.php, contains a button that triggers the display of results from Results.php within a div (divResults) on Main.php. The HTML content "These Are The Results" returned by Results.php is successfully displayed in the divResu ...

The dropdown menu in codeigniter is not displaying the selected option

When using a drop-down button to select an option from the available choices, I encountered a problem where the selected option was not displayed in the box. Additionally, it only allowed me to make one selection. The data for the drop-down menu is retriev ...

Having trouble with CSS margins behaving unexpectedly

Could someone please explain why I am unable to add margin-top/bottom or padding-top/bottom to this "a" tag? I am trying to center "Konoha" in the header box. html{ background-color: white } body{ width: 88.5%; height: 1200px; margin: 0 auto; borde ...

Issue with image slider loop functionality not functioning properly

Looking to incorporate this image slider into my website: http://codepen.io/rslglover/pen/DBvoA The slider functions properly, but it halts after completing its cycle. I'm unsure of what distinguishes the CodePen code from mine. How can I replicate t ...

Troubleshooting Material-UI: The Mystery of the Missing Dialog

I have been struggling with getting a pop-up dialog to appear when a form is incorrectly filled out. Despite my efforts, the code that should trigger the dialog upon submission does not seem to be working as expected. The function renderError(), responsib ...

Is it possible to include number padding in a Bootstrap number input field?

When using an input box like this: <input type="number" class="form-control" value="00001" /> Is there a way to make it so that when the arrow up key is pressed, it changes to 00002 instead of just 2? https://i.sstati ...

Experimenting with the static method within a singleton class using Typescript and Sinon

I have a separate layer in my application that uses a DAO class to retrieve data from the repository. I've implemented the DAO class as a Singleton and made its methods static. In another class, I've created service methods to manipulate the dat ...

Determine the number of rows in an Ajax-fed datatable (including paginated rows) that have a specific value in a

I am struggling with counting rows in #datatableOne where the 'Status' column has a value of 'Unknown'. I have attempted a couple of solutions, but they are not giving me the desired results. The first solution only counts the rows on ...

Netlify deployment experiencing delays and refusing to proceed with deployment

I am completely baffled by what is going on... could someone please take a look at this? Here are the last few lines from the deployment log: 5:10:16 PM: ────────────────────────────────── ...

When a <dl> element is nested within an <ol>, it will be rendered as a list format

I'm facing an issue with my CSS that affects how different browsers render definition lists embedded within ordered lists. In IE10, the list displays as expected - a bulleted list inside the ordered list without affecting the numbering. However, Firef ...

Testing a React component to ensure that it correctly handles clicks occurring outside

Utilizing the solution found in this particular answer to address clicking outside of a component: componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventLis ...

Downsides of utilizing variables as global entities in React components

I am currently working on integrating API data into my React component: const request = new XMLHttpRequest() let outputArray = [] request.open('GET', 'http://localhost:3005/products/157963', true) request.onload = function() { let d ...