Generally in a long web page, we all have a button that allows users to quickly navigate to different parts of the Web page, usually a button to return to the top, which we are using jquery to complete, but today we are going to explain to you that instead of using jquery, you use CSS3 animation, Creates a smooth animation effect that returns to the top.
Return to the top of the animation effect, allowing us to quickly navigate to the menu bar, usually, we use the jquery code is the way to write code
$ (' body, HTML '). Animate ({scrolltop:0}, 800);
So, if we set the ScrollTop to 500, the page will scroll to the top and 500px position.
CSS3 brings us a lot of advanced features, such as animation, and I'm thinking of a workaround that doesn't depend on JavaScript, and I finally find it impossible because we can't access the CSS3 animations API just through CSS code.
I am a bit unwilling, so give up, I decided to try to get the CSS3 animation through JavaScript API, so I found a way.
The idea is simple, first we need to use the jquery API to get to the current scrolling distance defined as: POS, and then in our <body> elements set margin-top negative:-P OS properties, so now we have a preliminary approach, we can see that When the scrolling distance increases, and the scroll slider's random position is shown below:
Let's continue scrolling to 0, which makes calculus more accurate, and finally triggers the scrolling animation before we only start transition in the BODY element and change the margin to 0, which gives us a top smooth effect to look at the entire site's slides, and the scrolling handle always stays on the 0 position, And by playing with the loose function a little, we can see an amazing effect, you can see the above demonstration.
Implementation methods
Let's say we have this button:
<div id= "Go-top" > Go to Top </div>
Now let's move on to a part of jquery:
Define the variables var easing, E, POS;
$ (function () {
Get the Click event
$ ("#go-top"). On ("click", Function () {
Get the scroll pos
pos= $ (window). scrolltop ();
Set the body top margin
$ ("Body"). CSS ({"Margin-top":-pos+ "px", "overflow-y": "Scroll"});
This is posed to fix the blink of the window width change
Make the scroll handle on the position 0
$ (window). scrolltop (0);
Add the Transition property to the BODY element
$ (' body '). CSS ("transition", "all 1s ease");
Apply the scroll effects
$ ("Body"). CSS ("margin-top", "0");
Wait until the ' transition end $ (' body '). On ("Webkittransitionend transitionend mstransitionend otransitionend", func tion () {
Remove the Transition property
$ ("Body"). CSS ("transition", "none");
});
});
});
Now, if you click the Div#go-top button, you will use CSS3 to jump over the top of the page.
How to use easing
Have to say, in the animation in the CSS, easing use is too limited, not flexible.
Conclusion
For me, I think this method is a good solution to replace the traditional jquery using it, and it will also scroll the height of the handle if you notice
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
