Having trouble with Jquery's Scroll to Div feature?

Question

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be greatly appreciated.

<div class='layer_two'>
    <a class="scrollTo" href=""><img src='https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/TriangleDown-512.png' />
</div>

<div class='second-container'>
    <div class='special'>
        <h2>Turn ordinary into extraordinary</h2>
        <div class='border'>

        </div>

jquery

$(".scrollTo").click(function() {
$('html,body').animate({
scrollTop: $(".second-container").offset().top},
'slow');
});

javascript jquery html css

Answer 1

Answer №1

$(".scrollTo").click(function(event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $(".second-container").offset().top},
        'slow');
    });
}

Give the code snippet above a try.

This piece of code will stop the default behavior of the click action on the link, either by using preventDefault() or by returning false at the end of your listener function. Both methods inform the browser to not execute its built-in behavior for this event, only to execute your custom listener.

Normally, the browser would carry out both your listener and its default behavior (e.g., navigating to a new page).

Answer 2

$(".scrollTo").click(function(event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $(".second-container").offset().top},
        'slow');
    });
}

Give the code snippet above a try.

This piece of code will stop the default behavior of the click action on the link, either by using preventDefault() or by returning false at the end of your listener function. Both methods inform the browser to not execute its built-in behavior for this event, only to execute your custom listener.

Normally, the browser would carry out both your listener and its default behavior (e.g., navigating to a new page).

Having trouble with Jquery's Scroll to Div feature?

Answer №1

Similar questions

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

Issue with MVC 4 Asynchronous File Upload: Controller Always Receiving Null Value

Determine whether the user has authorized the website with long-term access to obtain location information in the browser

Communication between a directive controller and a service via an HTTP call

"Experiencing a problem with Next.js 13 where the User Context is not functioning properly outside of _app

Do not allow negative values to be displayed in the text box

Strategies for extracting methods and refactoring to a separate file for better reusability

What is the best way to design a grid with various squares in React Native?

Consolidate all scripts into a single file with Asp.net MVC 5 bundling

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

Personalized jQuery Slider with automatic sliding

Challenges with form validation

Scrolling is endless with jCarousel - just press a button to keep moving even when you reach the first or

Utilize React to process and submit payments through Stripe

Timing issues with setInterval and setTimeout are causing them to execute at the incorrect moments

Interactive JavaScript Linkage

Troubleshooting issue: AngularJS not receiving NodeJS GET requests

Having trouble retrieving information from the JSON data received from the Google Place Search API

The icon cannot be displayed using the <use> tag in HTML

What is the proper way to define the font slant as "slnt" in NextJS development?