Jquery scrollUp scroll to the top

Jquery scrollUp scroll to the top

Preface: When a page is scrolled to a very low place, if there is a shortcut button to make it scroll to the top of the page, it is naturally required by the user, andJquery scrollUpThis plug-in meets our needs. However, it is obviously ineffective to read articles such as jQuery rolling to the top plug-in scrollUp, and additional settings are required.

In addition, I want to talk about jfinal in my jfinal series. However, as the project progresses, I find that the title cannot meet my needs, I want to talk about "explore jfinal and bootstrap", but the column cannot be changed, so I have to endure it.

Material Preparation

You can select my resource library to download it or download it from the official website. You need to make some modifications as provided by the official website.

Font awesome scrollup tutorial

Import File

<script type=text/javascript src=${ctx}/components/scrollup/jquery.scrollUp.min.js></script>

If there are other items, You can import them on your own!

Js

// Enable scroll up $ (function () {$. scrollUp ({scrollName: scrollUp, topDistance: 300, topSpeed: 300, animation: fade, animationInSpeed: 200, animationOutSpeed: 200, scrollText: '', activeOverlay :! 1 });});

The Style "fa-angle-up" in font awesome is used here ".

Parameter description

Parameter Name	Description
ScrollName	Binding id. The default value is scrollUp.
TopDistance	When the distance between the scroll bar and the top is pixel, the default value is 300
TopSpeed	Time to scroll to the top, in MS, 300 by default
Animation	Options include fade (fade-in and fade-out), slide (slider), and none (none)
AnimationInSpeed	Time when the button appears
AnimationOutSpeed	Time when the button is hidden
ScrollText	Text in the button. The default value is Scroll to top.
ActiveOverlay	Whether to display reference lines. The value is a hexadecimal color value or false. The default value is false.

I have adjusted the parameters for a while, but the effect is not very good. This still needs to be explored.

CSS

#scrollUp {    background-color: #777;    border: medium none;    bottom: 100px;    color: #eee;    font-size: 40px;    height: 46px;    line-height: 1;    opacity: 0.8;    overflow: hidden;    right: 20px;    text-align: center;    text-decoration: none;    width: 46px;}#scrollUp:hover {    background-color: #333;}

Custom style.

I have modeled the effect of bootstrap's Chinese network.