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

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 ...