The smooth scrolling feature is not functioning properly as the links are jumping to the top and bottom instead of scrolling

Question

The smooth scrolling feature is not functioning properly as the links are jumping to the top and bottom instead of scrolling

My links are supposed to smoothly scroll to the bottom and top, but they're not working correctly even though I believe the JavaScript is functioning properly.

Here is the JavaScript code:

$.fn.ready(function() {

            // Smooth scroll to top.
            $("a[href=#top]").live("click", function(e) {
                $("html,body").animate({scrollTop:0}, 1000);
                e.preventDefault();
            });

            // Smooth scroll to bottom.
            $("a[href=#bot]").live("click", function(e) {
                $("html,body").animate({scrollTop:$(document).height()}, 1000);
                e.preventDefault();
            });
        });

And here is the HTML code for the links:

 <a href="#bot" id="botlink" title="Go to bottom">↓</a>
 <a href="#top" id="toplink" title="Go to top">↑</a>

javascript jquery html css scroll

Answer 1

Answer №1

If you are utilizing the "live" event in jQuery, it seems like you may be working with an outdated version of the library. When it comes to navigating to the top or bottom of a page, it's important to understand the specific positions involved (top = 0, bottom = document.height). A functional jQuery script for this scenario would look something like this:

jQuery(document).ready(function($){

  $('#botlink').add( $('#toplink') ).on( 'click', function( e ){
    e.preventDefault();

    var $btn = $(this).attr( 'id' ).replace('#', '');
    var move_to = $btn === 'botlink' ? $(document).height() : 0;

    $('body').animate({
      scrollTop : move_to
    }, 'slow');

  });

});

The code snippet above detects the click event on either the #botlink or toplink elements. The move_to variable determines which button was clicked and calculates the position of the page accordingly. ~~To achieve the desired effect, it is necessary to animate both the html and body elements.~~

In reality, the script only affects the body element. Additionally, you can experiment with a live demonstration on jsFiddle here (the body element has been expanded to 1200px to showcase the effect).

Answer 2

If you are utilizing the "live" event in jQuery, it seems like you may be working with an outdated version of the library. When it comes to navigating to the top or bottom of a page, it's important to understand the specific positions involved (top = 0, bottom = document.height). A functional jQuery script for this scenario would look something like this:

jQuery(document).ready(function($){

  $('#botlink').add( $('#toplink') ).on( 'click', function( e ){
    e.preventDefault();

    var $btn = $(this).attr( 'id' ).replace('#', '');
    var move_to = $btn === 'botlink' ? $(document).height() : 0;

    $('body').animate({
      scrollTop : move_to
    }, 'slow');

  });

});

The code snippet above detects the click event on either the #botlink or toplink elements. The move_to variable determines which button was clicked and calculates the position of the page accordingly. ~~To achieve the desired effect, it is necessary to animate both the html and body elements.~~

In reality, the script only affects the body element. Additionally, you can experiment with a live demonstration on jsFiddle here (the body element has been expanded to 1200px to showcase the effect).

Answer 3

Answer №2

take a look at this fiddle, it could be useful for you

Check out the Js Fiddle

$("a[href=#top]").on("click", function (e) {
    //alert("top")
    $('html, body').animate({
        'scrollTop': 0
    }, 1000)
    event.preventDefault();
});

// Smooth scroll to bottom.
$("a[href=#bot]").on("click", function (e) {
    // alert("bottom")
    var a = $(document).height()
    $('html, body').animate({
        'scrollTop': a + 'px'
    }, 1000)
    event.preventDefault();
});

Answer 4

take a look at this fiddle, it could be useful for you

Check out the Js Fiddle

$("a[href=#top]").on("click", function (e) {
    //alert("top")
    $('html, body').animate({
        'scrollTop': 0
    }, 1000)
    event.preventDefault();
});

// Smooth scroll to bottom.
$("a[href=#bot]").on("click", function (e) {
    // alert("bottom")
    var a = $(document).height()
    $('html, body').animate({
        'scrollTop': a + 'px'
    }, 1000)
    event.preventDefault();
});

The smooth scrolling feature is not functioning properly as the links are jumping to the top and bottom instead of scrolling

Answer №1

Answer №2

Similar questions

Employing ngModel in an option dropdown

In PATCH requests, JSON data is not transmitted through Ajax

Angular 2: Implementing a Universal CSS Style Sheet

The payload is properly returned by the Reducer, however, the component is receiving it as

"Implement a feature that allows for infinite scrolling triggered by the height of

What is the best way to pass the value of a selected option to an express server

Is it possible for two event listeners to operate concurrently?

Instructions for populating a DataTable with JSON data while allowing for editing of rows

Randomly generated numerical value in input field

Learning about the intricacies of backend Node.js through Angular using GET requests

"Using JavaScript to Make Requests on Mobile Devices via HTTP

Oops! Make sure to explicitly allow the dependency @types/html2canvas by adding it to the "allowedNonPeerDependencies" option

How to implement a for loop within a Vue.js method

Parsing the JSON string from PHP using JSON.parse resulted in an unexpected and strange array

What is the reason behind jqXHR.done() method returning the jqXHR object?

What is the best way to customize the color of selected items in a RadComboBox using CSS?

What is the best way to broadcast video content from Google Cloud Storage to iOS Safari?

Storing client-side data permanently in ASP.Net is a crucial aspect of web development

Locate the chosen radio button within a group of <label> tags using the selenium webdriver

Change button to an ajax spinner when it is clicked using jQuery