back to top summary

The back to top function in the website is beneficial to enhance user experience. When a page is very long, going back to the top is essential.

Back to the top button, you can use pictures, background images, vector font icons, or use code css to generate. The css generated method is used here.

html:<a href="" title="回到顶部" id="toTop">
    <span id="arrow"></span></a>

css:
#toTop {
    display: none;
    position: fixed; /* 固定定位 */
    right: 10px;
    bottom: 30px;
    background-color: #e6e6e6;
    height: 40px;
    line-height: 40px;
    width: 40px;
    transition: all .4s ease .1s;
}#toTop:hover { background-color: #b7b7b7; }#toTop span {
    position: relative; /* 相对定位，以便其伪元素绝对定位 */
    top: 5px;
    left: 15px; /* 变换为顺时针旋转 30°，通过数学角度计算后适当调整位置 */
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
}#toTop span:after {
    content: "";
    position: absolute; /* 伪元素中是相对于 #toTop span 绝对定位 */
    top: -5px;
    left: 8px;
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

The various methods of returning to the top are summarized as follows:

1. The anchor tag

# contains a location information. The default anchor is #top, which is the top of the web page.

Method:

1. Use anchor tag, i.e. a tag, for the back to top button, ebfa17581619e559619a98ac60bf512dBack to top5db79b134e9f6b82c0b36e0489ee08ed

2. Place the positioning target at the top of the page, e10166176adc6fb3c08e898adf4430455db79b134e9f6b82c0b36e0489ee08ed. The values ​​of the name attribute and id attribute here are higher than the value of the href attribute in the first step. One less #, just choose one for name and id.

Disadvantage:

There will be extra # symbols in the address bar.

2. JavaScript Scroll event:

1350637a8e8d71c6055485f02c1060adBack to top5db79b134e9f6b82c0b36e0489ee08ed

scroll(0, 0) No. One parameter is the horizontal position relative to the screen, and the second parameter is the vertical position relative to the screen. Any of these values ​​can be adjusted.

3. animate slowly returns to the top:

js:
$(window).scroll(function () {    if($(window).scrollTop()>=100) {
        $("#toTop").fadeIn(400); /* 当滑动到不小于 100px 时，回到顶部图标显示 */
    }else {
        $("#toTop").fadeOut(400); /* 当滑动到小于(页面被卷去的高度) 100px 时，回到顶部图标隐藏 */
    }
});
$("#toTop").click(function () { 
    $("html, body").animate({scrollTop: 0}, 100); /* 持续时间为 100ms */    return false;
});