CODEWITHSUNDEEP
javascriptjquerybutton
Joshua Huff
Joshua Huff

Reputation: 25

Back to Top Button Issue (Potentially)?

I've got a back to top button that shows up on my webpage that I'm working on. When you scroll down and sometimes when it's clicked it jumps to the top and then jumps back to where you were on the page and then smoothly scrolls to the top like it's supposed to. Keep in mind that it does not do this all the time. Would this just be a lag or glitch issue or if there some error in my script?

    $(function(){

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 615) {
            $('.ion-android-arrow-dropup-circle').addClass('show');
        } else {
            $('.ion-android-arrow-dropup-circle').removeClass('show');
        }
    });

    $('.ion-android-arrow-dropup-circle').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
};

Searched 40+ questions and couldn't find an answer. Only saying this because if you don't and somebody finds one they always say, "You should have looked before asking." I see it all the time.

Upvotes: 0

Views: 63

Answers (1)

Joshua Huff
Joshua Huff

Reputation: 25

ANSWER TO MY OWN QUESTION

After going so long without responses I had moved on and decided not to worry about this issue at that time. Today, I was working on a different site using the same jQuery script and was having the same problem. I decided to try and fix it myself since I couldn't find help on the issue.

The solution was simple! I don't know how I missed it the first time around. All I did is take the above code and add one function to it:

$('.ion-android-arrow-dropup-circle').click(function(event) {
        event.preventDefault()
    });

I forgot all about needing to remove the default action of clicking a link which is jumping to the destination. It now works perfectly smooth and looks great, just like I wanted to begin with!

My fully updated script for your reference:

$(function(){
    $(document).on( 'scroll', function(){

    if ($(window).scrollTop() > 50) {
        $('.ion-eject').addClass('show');
    } else {
        $('.ion-eject').removeClass('show');
    }
});

    $('.ion-eject').click(function(event) {
            event.preventDefault()
        });
    $('.ion-eject').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 200, 'linear');
};

Upvotes: 1

Related Questions