Issue with smooth scroll feature not functioning properly

Currently, I am facing an issue with the smooth scroll feature on my website. Although I have implemented a to top arrow for users to move back to the top section of the page, the scrolling is not as smooth as intended.

The JavaScript code I used for achieving a smooth scroll effect is shown below:

$(function() {
  $('a.page-scroll').bind('click', function(event) {
    console.log("scroll");
    var $anchor = $(this);
  $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
  }, 1500, 'easeInOutExpo');
  event.preventDefault();
  });
});

However, despite implementing this script, the smooth scrolling is not functioning correctly. Here is the link to the jsfiddle where the issue can be observed: https://jsfiddle.net/36m5kp00/

In addition, the jQuery libraries that I have included in my project are:

<script src="scripts/controllers/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
javascriptjqueryhtmlcss

Answer №1

Here is a useful code snippet:

$(document).ready(function() {
  $('a.page-scroll').on('click', function(event) {
    $("html, body").animate({ scrollTop: 0 }, 1500);
    event.preventDefault();
  });
});

Answer №2

To utilize custom easing methods like easeInOutExpo, you will need to include the jquery easing plugin.

It is worth mentioning that jQuery comes with two built-in easing methods: linear and swing. You can find more information on these methods here: https://api.jqueryui.com/easings/

You can download the plugin from this link:

For a demonstration of how it works, refer to this example: https://jsfiddle.net/ashishanexpert/36m5kp00/4/

Your code should resemble the following:

$(window).scroll(function() {
  if ($(this).scrollTop()) {
    $('#letTop:hidden').stop(true, true).fadeIn();
  } else {
    $('#letTop').stop(true, true).fadeOut();
  }
});
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    console.log("scroll");
    var $anchor = $(this);
  $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
  }, 1500, 'easeInOutExpo');
  event.preventDefault();
  });
});

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

Can Xpath be condensed into a more compact form?

Currently, I'm immersed in a project that involves utilizing XPath on HTML. The lengthy XPath is being passed to the client-side using JavaScript. Due to the verbose nature of XPath strings, my curiosity has been piqued about the existence of a more c ...

htmlxpathstringcompression

Steps for creating a Foundation 6 accordion

Can anyone assist me in creating a Foundation 6 accordion? I tried to follow the code from the documentation, but it's quite confusing. I seem to be missing something and can't figure out what. Here is the HTML code from the docs: <ul class= ...

javascriptjqueryzurb-foundationaccordion

A guide on how to select all child checkboxes when the main checkbox is checked in a React application

I am looking to achieve a dynamic check of the children's checkboxes when the main checkbox is checked, specifically using ReactJS. I have come across solutions on Stackoverflow that involve JQuery, but I want to implement this functionality in ReactJ ...

javascripthtmlreactjscheckbox

When the React component's state is updated, an animation is triggered in a subcomponent connected to the parent component

The ProjectsSection component is responsible for rendering a document section with a header and cards. The goal is to trigger a header animation only when the header becomes visible on the screen for the first time and have it run once. However, adding a s ...

cssreactjs

The Ajax success callback unexpectedly displays the number "1" in the top left corner of the empty page instead of updating the specified div

Currently, I am in the process of developing a Yii2 application. I have encountered an issue where I select data from a Bootstrap modal popup and submit it to a controller action that contains an insert query. The problem arises after submitting the data f ...

javascriptjqueryyii

Achieving a Unique CSS Effect: Placing an Image on Top of a Card That Extends Beyond its Borders

As a newcomer to CSS, I’m not entirely sure what to call this effect or how to achieve it. Essentially, I am looking to create something similar to (picture 1), but all I have managed so far is (picture 2): https://i.sstatic.net/FrR16.png I’ve experime ...

htmlcsstwitter-bootstrapbootstrap-4

How to target a nested element with jQuery: selecting a div

I'm attempting to make it so that only the div that is clicked on triggers an alert, instead of the div clicked on as well as the container divs. When the third div is clicked, I want it to only display "third" in the alert. Thank you for any assistan ...

jquery

Utilizing an Immediate-Invoked Function Expression (IIFE) for jQuery in JavaScript

I'm looking at this code snippet that I believe is an Immediately Invoked Function Expression (IIFE). But, I'm confused about the role of (jQuery) and ($). I understand that it involves passing a reference to jQuery into the IIFE, but can someone ...

javascriptjqueryiife

Is it possible to eliminate the table borders and incorporate different colors for every other row?

Eliminating the table borders and applying color to alternate rows. Check out my code snippet: https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.ts. ...

htmlcssangulartypescriptangular-material

Tips for styling custom buttons within the active editor popup of tinyMCE using CSS

Looking to enhance my tinyMCE active editor popup with custom CSS. Check out the screenshot provided for reference https://i.sstatic.net/vdVDF.png. Below you can find the code snippet used as a reference: tinymce.activeEditor.windowManager.open({ tit ...

javascriptcsstinymce-4

Create a custom countdown using Jquery and Javascript that integrates with MySQL and PHP to display the datetime in the format Y-m-d

Hey there, I'm looking to create a countdown script using dates in the format (Y-m-d H:m:s). The goal is to retrieve the current_datetime and expire_datetime in this format and incorporate them into some JavaScript or jQuery plugin to display a countd ...

phpjavascriptjquerydatetimecountdown

Is it possible to utilize an Angularjs service as a means for transferring data between controllers?

After experimenting with this example to facilitate data transfer between two different controllers in AngularJs, I am encountering an issue. While I can modify a variable of the service from the second controller and display it in its view, the change doe ...

htmlangularjscontrollerfrontendbackend

Rotating Images with jQuery using the 'jQueryRotate' extension

Trying to create a hover effect where one div triggers the rotation of an image in another div. Experimenting with the jQueryRotate plugin found at http://code.google.com/p/jqueryrotate/ Check out my code on jsFiddle. The green square is rotating with CS ...

javascriptjqueryhtmlanimationplugins

Why does the final value appear when passing an incrementing counter as a prop to multiple React Components created in a loop?

I am currently unraveling the concept of closures in JavaScript. Within this code snippet, I am cycling through the values of the 'items' array using a foreach loop. I have defined a let variable named "count" outside the scope of the loop. Afte ...

javascriptreactjstypescriptclosures

Can we expand the capabilities of a ThreeJS object in any way?

In my ThreeJS project, I am implementing an interactive feature where users can click on cubes that behave differently when clicked, such as having different color animations. To achieve this, I plan to create extension classes for the THREE.Mesh object a ...

javascriptoopinheritancethree.js

Ajax seems to be interacting with an empty session variable

I am facing some issues with a piece of code that I've written. Here's the function in question from my PHP class: public function generalSettings(){ $totalPrice = 0; foreach($_SESSION['items'] as $key => $value){ ...

javascriptphpjqueryajaxoop

Leverage the power of PHP and cURL to retrieve JSON data from a file containing a mix of text, HTML

When utilizing PHP and cURL on THIS website, the returned file contains data that looks like this: <!DOCTYPE html> <html> <head></head> <body> <script> window['flyerData'] = { ...

javascriptphpjsoncurl

Tips on how to retrieve the tooltip of an image that is only displayed when hovering over it using Selenium

Currently, I am in the process of learning Selenium and aiming to retrieve the tooltip displayed on an image in the Selenium console. The tooltip is set to only appear when hovering over the image. Despite my attempts to obtain the xpath and use actions, I ...

javascriptjavaseleniumselenium-webdriverselenium-chromedriver

What is the best way to implement a bootstrap progress bar without using any JavaScript libraries, or if necessary, using a

Can we simplify the creation of a progress bar using JavaScript only? progressBarElem = document.createElement("div"); progressBarElem.className = "progress-bar" progressBarElem.setAttribute("role","progressbar") progressBarElem.setAttribute("aria-valueno ...

javascriptdynamicbootstrap-4progress-bar

What is the optimal method for fetching JSON information with Angular?

I have data that I organized in a JSON-like structure, as shown below: { "Id": { "1": [ { "Item1": "Item One", "Item2": "Item Two", "Item3": "Item Three" ...

javascriptjsonangularjs