Trouble with smooth scrolling functionality

I've been trying numerous smooth scrolling plugins in an attempt to figure out why the signup button isn't smoothly scrolling down to the #target section as expected.

Any assistance from the hive mind would be greatly appreciated, I am currently utilizing CSS tricks code.

$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    || location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         $('html,body').animate({
             scrollTop: target.offset().top
        }, 1000);
        return false;
    }
}
});

You can view the pen containing all the HTML, CSS, and other JavaScript at

https://codepen.io/samducker/pen/RVoORy

javascriptjqueryhtmlcss

Answer №1

Stop your current code and give this one a shot (consider adjusting the speed to 500), it could potentially cause some delay if there is a lot of content between your button and the anchor:

/*Smooth Scroll Button*/
$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Answer №2

It appears that your jQuery selector is not correct, causing the click function to fail when you try to click on the button. Instead, it reverts to its default anchor behavior. I have made a modification to your codepen by updating the jQuery selector to a. You can view the changes here: https://codepen.io/anon/pen/VbmNXd

Please ensure that the jQuery selector used in your application is appropriate for the functionality you want to achieve.

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

byte sequence displays as binary data (angular + express)

I've been working on pulling files from a back-end Node.js / Express server and displaying them in an Angular front-end. Despite trying different methods, I keep facing the same issue - the data displayed at the front-end appears as a bytestring. Even ...

javascriptangularjsnode.jsexpress

In CSS, the color inheritance applies when a link is contained within a block of text

Inside the container, the text color is white. However, the link inside the text appears blue instead of white. I have implemented material ui styles for this issue. Although I have tried using the !important tag, it still doesn't work. ...

htmlcssreactjsmaterial-uistyles

I am looking to implement a function in JavaScript that will prevent the next button from being enabled until all options

I have a total of 6 dropdown menus along with a next button and previous button. I want the next button to be disabled until all 6 dropdown menus are filled out. Once all 6 dropdown menus are filled, the "next" button should become enabled. Below is the c ...

javascriptjquery

Submenu not appearing in context menu

Check out this demo I created with a canvas menu. When you click on the canvas, a menu appears. Hover over the "Aggregate" option to reveal a second submenu on the right. The issue arises when you mouse out of "Aggregate" and then hover back in – the po ...

jqueryhtmlcss

Arranging div containers with nested content

Within my application, I am dynamically displaying images side by side to users. Users have the ability to assign points to these images, and I would like to give them the option to sort the images based on points, with the highest points displayed first i ...

javascriptjquerysortinghtml

Is it possible to mandate the use of only certain versions of a library?

I'm facing an issue with packages that have dependencies on both version 3.0.4 and 5.0.1 of minimatch. The vulnerability in 3.0.4 prompts me to want to fix the reference to 3.0.6 or 3.0.7, while leaving 5.0.1 untouched. Essentially, I aim to have refe ...

javascriptsecuritynpmyarnpkg

How to dynamically adjust font size using Javascript

Is there a way to adjust the font size of the left-column using JavaScript? <div id="left-column"> <a href="">1</a><br> <a href="">2</a><br> <a href="">3</a><br> <a href=""> ...

javascripthtmlcss

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Just starting out with programming and currently working on a new web application using Meteor and AngularJS. I would like to incorporate the elements/css from 'Zurb Foundation For Apps' into my project... I am familiar with including Bootstrap ...

javascriptcssangularjsmeteorzurb-foundation-apps

Scrolling problems with numerous bootstrap modals on a Webpage

I am faced with an issue on a page where I have set the property overflow: auto. This page features a hyperlink to open the first modal, and within the first modal, there is a link to the second modal. My steps are as follows: Open Page 1 Click on the l ...

jqueryhtmltwitter-bootstrapbootstrap-4bootstrap-modal

The `readonly` html attribute prevents users from typing in text when included in the original html code, yet does not have the same effect when added dynamically through JavaScript

Similar Issue: How to apply "readonly" to <input> using jQuery This situation is quite perplexing, and I am hopeful for a straightforward solution. While my work involves Rails, I suspect this issue transcends framework specifics. Initially, se ...

javascriptjqueryhtmlreadonly

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

htmlcsstwitter-bootstrap

Is it possible to create a subclass component to customize the event handler?

Looking to modify the behavior of a complex React component (specifically, Combobox from react-widgets)? I want to customize the onKeyDown event so that when the enter key is pressed, I can handle it myself without affecting the Combobox's default fun ...

javascriptreactjs

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

csshtmlright-to-left

When the email field is changed, the string is not being set to the state if it is

I encountered a strange issue while setting an email input as a string to state. Even though I can see on React Dev Tools that it gets sent, when I try to log it from another function, I get an empty string. The odd part is, if I change the order of the in ...

javascriptreactjs

Creating a Dynamic Login Panel Using HTML, CSS, and Jquery

Designing a dynamic sliding login panel utilizing Html, CSS, and jquery alongside various plugins. Check it out here: http://24.125.42.135/ When activated, the bar smoothly pushes down the content (click on the login option at the top right corner). This ...

javascriptjqueryhtmlcss

Can you explain the meaning of `bind(this)`?

Understanding how bind works is essential for binding objects or functions to desired functions. However, the usage of bind(this) can be perplexing. What exactly does this refer to in the context of the bind function? Here is an example of code snippet fr ...

javascriptreactjs

What strategies can I use to dynamically update the .active class in jquery so it doesn't only target the initial one?

Utilizing bootstrap for tab-fade functionality has been successful so far. However, I am facing an issue when trying to select multiple active classes instead of just one. My current JQuery code only changes the text in the first element with the "active" ...

javascriptjqueryhtmlcss

Constantly defining the fill color in an SVG with AngularJS

In the front end, I am using a constant as a select box that contains an SVG element. The objective is to insert the SVG into the DOM and have it functional. (function () { 'use strict'; angular.module('app.constants', []) ...

javascriptangularjssvg

Generating an image id upon click in ReactJS

Below is the code designed to showcase a collection of images on a webpage with React JS: this.displayedImageList = this.imageResults.map(function(picture){ return <div className="galleryBox" key={picture.toString()}><img src={picture} alt="I ...

javascriptimagereactjsonclick

Leveraging various endpoints with Apollo Client

Having mastered Apollo and GraphQL with the help of Odyssey, I am currently engrossed in creating my own project using Next.js. This involves fetching data from not one, but two different GraphQL endpoints. The dilemma at hand: How can I efficiently retri ...

javascriptgraphqlnext.jsapolloapollo-client