Button Click Not Allowing Webpage Scroll

I am currently in the process of developing a website that aims to incorporate a significant amount of motion and interactivity. The concept I have devised involves a scenario where clicking on a button from the "main menu" will trigger a horizontal and vertical scroll to the corresponding content linked to that specific button. For instance, upon selecting the "Info about Dogs" button, the page would smoothly transition to relevant information pertaining to dogs.

Despite using the ScrollTo() jQuery plugin for initiating the scrolling mechanism, I am encountering difficulties with achieving both vertical and horizontal scrolls concurrently.

Here is my HTML: 

<!-- Head section includes references to stylesheets and essential details -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <link href="stylesheets/index.css" rel="stylesheet" type="text/css" />
            <link href="http://fonts.googleapis.com/css?family=Walter+Turncoat" rel="stylesheet" type="text/css" />
</head>
<body>
    <section class="wrapper" id="wrapper">
        <section class="mainMenu" id="mainMenu">
            <section class="topRow">
                <a href="#" target="_self" id="aboutInfo"><img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="aboutIcon" id="aboutIcon"></a>
                <img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="projectsIcon" id="projectsIcon">
            </section>

            <section class="middleRow">
                <img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="feedbackIcon" id="feedbackIcon">
                <img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="contactIcon" id="contactIcon">
            </section>

            <section class="bottomRow">
                <img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="blogIcon" id="blogIcon">
                <img src="assets/placeholder_icon.jpg" alt="placeholder icon" class="resumeIcon" id="resumeIcon">
            </section>
        </section>


        <section class="about" id="about">
            <p>Hello, world</p>
        </section>
    </section>


<footer>
    Copyright &copy; 2015
</footer>

CSS:

/* DOM setup */
html
{
    display: block;                                                                 /* Set the DOM as a block */
    overflow: hidden;                                                               /* Conceal the scrollbar */
    background: url(../assets/background.jpg) repeat;                               /* Background image for the page */
    color: #FFF;                                                                    /* Text color */
    margin: 0px;                                                                    /* Remove default margin */
    padding: 0px;                                                                   /* Remove default padding */
    border: none;                                                                   /* Remove default borders */
    font-family: 'Walter Turncoat', 'Bradley Hand ITC', arial;                      /* Font style */
}


/* Top row settings */
.topRow
{
    margin: 200px 0px 0px;
}

    .aboutIcon
    {
        height: 64px;
        width: 64px;
        margin-left: 700px;
    }

    .projectsIcon
    {
        height: 64px;
        width: 64px;
        margin-left: 370px;
    }


/* Middle row settings */
.middleRow
{
    margin: 100px 0px 0px;
}
    .feedbackIcon
    {
        height: 64px;
        width: 64px;
        margin-left: 550px;
    }

    .contactIcon
    {
        height: 64px;
        width: 64px;
        margin-left: 650px;
    }


/* Bottom row settings */
.bottomRow
{
    margin: 100px 0px 0px;
}
    .blogIcon
    {
        height: 64px;
        width: 64px;
        margin-left: 700px;
    }

    .resumeIcon
    {
        height: 64px;
        width: 64px;
        margin-left: 370px;
    }


.about
{
    display: block;
    width: 720px;
    height: 1080px;
    margin: 6000px 0px 0px 10000px;                                                
}


/* Footer customization */
footer
{
    height: 30px;
    width: 500px;
    margin: 200px auto 0px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}

JavaScript:

$(document).ready(function()
{
animateIcons();

$("#about").hide();
$("#projects").hide();
$("#feedback").hide();
$("#contact").hide();
$("#blog").hide();
$("#resume").hide();


function animateIcons()
{
    // Icon animations using the circulate plug-in
    $("#aboutIcon").circulate(
    {
        speed: 2000,
        height: 5,
        width: 25,
        sizeAdjustment: 100,
        loop: true,
        zIndexValues: [1, 1, 1, 1]
    });

    $("#projectsIcon").circulate(
    {
        speed: 2800,
        height: 11,
        width: -25,
        sizeAdjustment: 100,
        loop: true,
        zIndexValues: [1, 1, 1, 1]
    });

    $("#feedbackIcon").circulate(
    {
        speed: 1500,
        height: -15,
        width: 10,
        sizeAdjustment: 100,
        loop: true,
        zIndexValues: [1, 1, 1, 1]
    });

    $("#contactIcon").circulate(
    {
        speed: 1500,
        height: 15,
        width: 10,
        sizeAdjustment: 100,
        loop: true,
        zIndexValues: [1, 1, 1, 1]
    });

    $("#blogIcon").circulate(
    {
        speed: 2800,
        height: 11,
        width: -25,
        sizeAdjustment: 100,
        loop: true,
        zIndexValues: [1, 1, 1, 1]
    });

    $("#resumeIcon").circulate(
    {
        speed: 2000,
        height: 5,
        width: 25,
        sizeAdjustment: 100,
        loop: true,
        zIndexValues: [1, 1, 1, 1]
    });
}
});


$("#aboutInfo").click(function()
{
    $("#about").scrollTo();

    $("#about").show("slow");
});
javascriptjqueryhtmlcss

Answer №1

Your plugin is not being utilized correctly. The element to which you attach the event should have the maximum width/height value set. Then, you need to pass an element as the first argument to the scrollTo function:

$('body').scrollTo('#about');

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

Make JQuery send a POST request instead of OPTIONS when making a cross-domain call

Currently, I am facing a challenge where I need to send an ajax POST request (json) to a different domain. However, since I am testing on localhost and do not have access to the server yet, everything is a bit more complicated. Unfortunately, it is not po ...

jqueryajaxjsonauthenticationcors

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

I am implementing a code in the middleware.ts file to redirect users to specific pages based on their role. Here is the code snippet: import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { get ...

javascriptreactjstypescriptnext.js

Having trouble transmitting information from the view to the controller in Asp.net MVC with Jquery

I've been struggling to send data from my View to the controller because it always shows a count of 0. The request carries the data according to the developer console, but the action method fails to receive it. I'm at a loss in identifying the pr ...

c#jqueryajaxasp.net-ajax

Submitting data to a PHP script using AJAX and the $_POST method

I'm attempting to transfer data from my AJAX request into a PHP $_POST variable in order to update my database. HTML <form id="23" method="post"> <select name="admin" onchange="chosenadmin(23)"> <option value="rick">rick&l ...

javascriptphpjqueryajaxpost

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

I am facing challenges in building a React production Docker container with Azure DevOps pipelines. Despite upgrading my build environment and code, the pipeline failed to run successfully. After conducting some research, I attempted to add the "--node-fla ...

javascriptreactjsazure-devopsout-of-memorydocker-build

The express app.get middleware seems to be malfunctioning due to a 'SyntaxError: Unexpected end of input'

Currently, I'm diving into an Express tutorial on YouTube but hit a roadblock with middleware that has left me bewildered. In my primary file, the code looks like this: const express = require('express'); const path = require('path&ap ...

javascriptnode.jsexpress

The $_POST request was interrupted and data was severed

I am currently facing an issue with my $_POST request. I am sending an array with 855 records through AJAX, but my AJAX controller is only receiving 833. The strange part is that it consistently cuts out at the same point: Here is my JQuery code: var for ...

phpjqueryajaxpost

What are the reasons behind the unexpected behavior of the replace() method in the newest Safari update?

What is causing the JS method replace() to behave incorrectly in Safari version 11.1 when using "$<" in the second argument? For example: "aaaXXXbbb".replace(/XXX/, '_before_$<_after_') The actual result is: "aaa$<_after_bbb" The ex ...

javascriptregexreplacesafari

What are some techniques for concealing error messages?

Can you assist in resolving this issue? There is a form which displays the inscription "You break my heart" immediately after loading, but I need it to only appear after the user attempts to enter text in the form. <div ng-app=""> <f ...

javascriptangularjs

Is there a way to modify the background color of ::before when hovering over it?

I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...

javascripthtmlcssreactjssass

Passing Object Data from Child to Parent Component in React and Leveraging its Functionality

After performing a date calculation, I stored the values of year, month, and day in an object. Now, my goal is to send this object to the parent component App.js, and then pass that data to another child component named Modal.js as a prop. I want to displa ...

javascriptreactjsreact-hooksreact-propsreact-component

Tips for maintaining the border radius of a container while changing the background color on hover

I am encountering an issue with a drop-down list where the bottom corners have a border-radius applied, and I would like to change the hover color of the li items. However, when hovering over the last item, the background-color covers up the border radiu ...

htmlcss

Typescript is throwing an error stating that the type 'Promise<void>' cannot be assigned to the type 'void | Destructor'

The text editor is displaying the following message: Error: Type 'Promise' is not compatible with type 'void | Destructor'. This error occurs when calling checkUserLoggedIn() within the useEffect hook. To resolve this, I tried defin ...

javascripttypescriptpromisetypescript-genericsreact-typescript

SQL statement not recognized

My current project involves conducting an experiment using a pre-coded script accessible through the link here. In this experiment, I'm utilizing xampp as my web server with mysql. However, when I attempt to run the authentication page containing the ...

phphtml

Issues with Flex layout in Firefox causing functionality errors

My two text inputs are not cooperating with flex properties as expected. They should be positioned like this: https://i.sstatic.net/ZSumb.png However, they are currently positioning like this: https://i.sstatic.net/e430n.png CSS .container{ width ...

htmlcssfirefoxflexbox

Add delayed event listeners to embedded AJAX request beyond function boundaries

I'm working on developing a custom AJAX method extension named getApi that automatically includes my authentication bearer token in the request header. In my code, there is a function called getToken() which retrieves the token either from sessionSto ...

javascriptjqueryajaxjquery-deferred

Associate text with a color from a predetermined list (JavaScript)

As I work on adding tags to my website for blog posts, I have a specific vision in mind. Each tag should be assigned a unique background color selected from a predefined array of theme colors. My goal is to assign the same background color to tags with id ...

javascriptstringtypescriptcolors

Issue with AddToAny plugin not functioning properly on FireFox

I’m having issues with AddToAny for social media sharing on my website. It seems like FireFox is blocking it because of tracking prevention measures. Error Message in Console: The resource at “https://static.addtoany.com/menu/page.js” was blocked d ...

javascripthtmlfirefoxshare

Phonegap experiencing issues with executing JavaScript code

My attempt to utilize phonegap is encountering an issue where my javascript is not running. Here's what I've tried so far: <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" / ...

javascriptioscordovaios7

Troubleshooting problem with divs overlapping in Internet Explorer 7

Check out this webpage: http://jsfiddle.net/aJNAw/1/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

csslayoutinternet-explorer-7