back to top summary-JS Tutorial-php.cn

高洛峰

Release： 2016-10-08 14:28:46

Original

1517 people have browsed it

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>

Copy after login

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);
}

Copy after login

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, Back to top

2. Place the positioning target at the top of the page, . 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:

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;
});

Copy after login