Jquery's animate () slow response to problem resolution __jquery

Source: Internet
Author: User

A page with a button that goes back to the top, click on the page will automatically return to the top of the page, you can use the way of hyperlinks, but the instant return to the top of the effect is not very ideal, the better effect is to scroll up for about 0.5 seconds, which requires the animation effect.

I chose to use jquery's animate () method, the top effect is perfect, but another effect is not ideal.

I want the height of the top button to disappear when it is less than the height of the screen, to appear when it is greater than its height, and to use CSS properties ' Opacity ' to control, but every time is to pull up to the top of the button or not disappear, finally disappeared and then pull to the bottom button does not appear, the code is as follows, CSS code is not listed out:

<!--index.html-->
    <div class= "SideBar" >
        <div class= "gototop" ></div>
    </div >
Back to top
    $ (". Gototop"). On ("click", Function () {
        $ ("Html,body"). Animate ({scrolltop:0}, ' slow ');
    });
Whether the control button disappears
    $ (function () {
        var windowheight = window.innerheight;
        var $goToTop;
        $ (window). Scroll (function () {
            $goToTop = $ (". Gototop");
           if (WindowHeight < $goToTop. Offset (). top) {
            $goToTop. Animate ({opacity:1},200);
        } else{
            $goToTop. Animate ({opacity:0},200);}});
    

has been a problem, the code checked three or four times did not find the problem, but the effect is a mistake, then there is no way to Google a bit, and suddenly found the answer stackoverflow:jquery slow reaction time

It's a very, very. You are calling the scroll listener which occurs evry and moment while you are. But you also play a animation which is relatevly slow to scroll. The call of the scroll listener by scrolling, you create multiple nimations calls which try to play all in once (and tha The T is why it slows the UI).

That is, the mouse to scroll one time to trigger a animate () method of execution, and each execution is required time, for my code is a 0.2s execution, although not a long time, but many many times the superposition together on the implementation of different animate () method of delay resolution

One solution would is to call. Stop () before. Animate

That's how you modify the Animate () method:

    Add the Stop () function before the animate () method
    $goToTop. Stop (). Animate ({opacity:1},200);

Problem solving ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.