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

I could really use some guidance on how to begin with the Node.JS app file in BlueMix

After delving into JS tutorials, I feel comfortable with the syntax and approach. Now, my focus is on utilizing Node.JS to develop an app using BlueMix. While I consider myself proficient in Java, web programming is uncharted territory for me, leaving me s ...

javascriptnode.jsibm-cloud

Surprising sight of a blank canvas behind the font-awesome icon

Is there a way to remove the unexpected white background that appears when adding a font-awesome icon? Here is the HTML code: <div class="notifications-window" id="close-notifications"> <div class="notifications-header&qu ...

htmlcssiconsfont-awesomestyling

Capturing user input with Angular Material forms in HTML

In the process of working on a project in Angular, I am utilizing the Angular Material component library. As part of this project, I am creating a form with multiple fields. Everything is functioning properly, however, the layout appears slightly off: ht ...

htmlangulartypescriptangular-material

Struggling with developing a straightforward application with Angular-Material

My goal is to develop an application that utilizes the Angular Material navigation bar, as showcased in this example. Being relatively new to AngularJS, I'm facing an issue where my app loads but only displays a blank page. Below is the code snippet ...

javascripthtmlangularjstwitter-bootstrapangular-material

What are the pros and cons of using a piped connection for Puppeteer instead of a websocket?

When it comes to connecting Puppeteer to the browser, you have two options: using a websocket (default) or a pipe. puppeteer.launch({ pipe: true }); What distinguishes these approaches? What are the benefits and drawbacks of each method? How do I know wh ...

javascriptnode.jspuppeteerwebautomation

In your experience, what's the most efficient method you've come across for editing tags?

Currently, I am working on implementing a feature that allows users to edit the list of tags displayed next to each link on a website. This includes adding, removing, and modifying tags. I am searching for an efficient way to make this process user-friend ...

jqueryajaxtags

Issue with Framer Motion Modal: Animation presence fails to function

Currently, I am facing an issue with the exit animation of a modal created using framer motion. While the initial animation on opening the modal works perfectly fine, the exit animation fails to trigger and the modal disappears abruptly without any transit ...

javascriptreactjsanimationframer-motion

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss

Tips for effectively displaying HTML data from a database on a web browser

Storing html data in a database is a common practice for many web developers. The html data generated by a wysiwyg editor is typically simple and straightforward. Prior to storing the html data in the database, it is essential to run it through HTMLPurif ...

phphtmlsecurityxsshtmlspecialchars

Tips on running methods consecutively within ngOnInit in Angular

I'm currently working on an ngoninit function that contains four methods. Two of these methods are responsible for retrieving data from the API, while the other two are intended to load this data when the page loads. ngOnInit(){ getname(); getsubjects ...

javascriptangularconstructorangular-reactive-formsngoninit

JQuery not being recognized by MVC4 view

I encountered an issue with my @Html.DropDownList that is supposed to invoke a jquery function, but it seems that the function is not being called. I've attempted the following: $(document).ready(function () { $('.test').change(function ...

javascriptjqueryasp.net-mvc-4

Tips for preventing window.location from becoming relative to the file

Despite my best efforts, I couldn't figure out why this issue was occurring or how to resolve it. Here is the code in question: window.location.href=("www.google.com"); The intended functionality of this code is to redirect to google.com, but inst ...

javascripthtmlwindow.location

Tips for adjusting the color of a linear gradient in a shimmer effect

I have a puzzling question that I just can't seem to solve. My goal is to display a shimmer effect on cards as a temporary placeholder until the actual content loads. I found some CSS code in this answer, but when I tried it with a dark background, t ...

css

What is the Best Way to Send JavaScript Variables to MYSQL Database with PHP?

I am having trouble sending my variable to a MySQL database. The database only displays the variable when using the HTML input tag. The error message I received was "Undefined index: rate & amount." Seeking assistance to resolve this issue. Thank you! ...

javascriptphphtmlmysql

Preparing JSON data for creating a wind map with Leaflet

I am currently working on converting netCDF data to JSON in order to use it with leaflet-velocity. This tool follows the same format as the output of grib2json used by cambecc in earth. An example of sample JSON data can be found at wind-global.json. By u ...

javascriptjsonleafletdata-conversionnetcdf

How can curly braces be utilized in an array reduce method?

If the function `fn3` is used instead of `fn2` in this code snippet running on node 9.5.0, the `console.log(totalUpvotes)` will display `undefined`. Shouldn't it actually be equal to 92? const posts = [{id: 1, upVotes: 2}, {id:2, upVotes: 89}, {id: ...

javascriptnode.jslambdaecmascript-6arrow-functions

Exploring the setTimeout function in JavaScript

As I understand it, the setTimeout function creates a new thread that waits for x milliseconds before executing the JavaScript function. setTimeout(functionName, timeInms); My question is: Is there a way to instruct it to run after all other JS on the pa ...

javascript

Determining if a user is already logged in from a different device using express-session

After a user logs in, I assign the username to their session with the code: req.session.username = "...."; This identifies the session with a username, but now I need to figure out how to detect if this same username is already logged in from another dev ...

javascriptnode.jsexpressexpress-session

Having trouble getting a new input box to be added when clicking with AngularJS?

I am facing an issue with adding dynamic form fields to the database using PHP. I have utilized angular for this purpose, but only the last form field is getting inserted into the database. To address this, I attempted using arrays and loops to increment a ...

javascriptangularjs

PHP overall outcome

I have created a form that includes checkboxes, but I am facing difficulty in calculating the total result based on the selections. Ideally, if a user selects three checkboxes, the total should be $3, and if only one checkbox is selected, the total should ...

phphtml