CODEWITHSUNDEEP
javascriptjquery
user4708518
user4708518

Reputation:

Javascript button appear animation

I have the back to top button that appears when you reach a point on the page, which is working fine, however, when it appears the text is on two lines until the box has finished the animation to appear. So, is there anyway to prevent this? What I mean by the animation is: btt.show('slow');

Code:

$(document).ready(function () {
    var btt = $('.back-to-top');

    btt.on('click' , function(e) {
        $('html, body').animate({
            scrollTop: 0
        }, 500);
        btt.hide('slow');
        e.preventDefault();
    });

    $(window).on('scroll', function () {
        var self = $(this),
            height = self.height(),
            top = self.scrollTop();
        if (top > 500) {
            btt.show('slow');
        } else {
            btt.hide('slow');
        }
    });
});

Example: http://codepen.io/Riggster/pen/WvNvQm

Upvotes: 5

Views: 777

Answers (2)

somethinghere
somethinghere

Reputation: 17350

The problem is caused by animating the width of a box, I think it might be better to animate the position of it instead, but - even better - lets use CSS animations!

$(window).on('scroll', function () {
    if ($(window).scrollTop() >= 500) {
        $(".button").addClass('show');
    } else {
        $(".button").removeClass('show');
    }
});
#wrapper { 
    width: 100%; 
    height: 2000px;
}
.button {
    position: fixed;
    bottom: 50px;
    right: -100px;
    /* You might still need prefixes here. Use as preferred. */
    transition: right 500ms;
}
.button.show {
    right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
  <div class="button">Here's my button!</div>
</div>

I've defined your button as hidden by default, by giving it a position of right: -100px. When we hit the correct scroll position, we add the class show and that triggers the animation performed by CSS and not javascript, as we have the transition property for the property right defined - that way the browser does the heavy lifting.

Upvotes: 1

JuniorDev
JuniorDev

Reputation: 1200

Toggling show/hide alters your elements width. You either have to put it in a container with display: inline

Or more ideally you might want to change show/hide to jQuery fadeIn() / fadeOut() which is more appropriate for "Back to Top" indicators.

Here is your codepen example modified with inline container: http://codepen.io/anon/pen/MwWweY

Upvotes: 0

Related Questions