css to achieve quick return to the top effect-CSS Tutorial-php.cn

css to achieve quick return to the top effect

王林

Release： 2020-06-02 09:47:18

forward

6563 people have browsed it

css to achieve quick return to the top effect

Background:

Nowadays websites are basically long pages. Most of them have four or five screens, and some have two or three screens. Sometimes the pages are too long. In order to improve the user experience, a return to the top button will appear on the right side of the page, so that you can quickly return to the top to avoid a visual screen appearing on the sliding page. There are generally four ways to return to the top.

1. To return to the top through anchor links, you need to add a tag named top to the body

<a href="#top" target="_self">回到顶部</a>

Copy after login

2. To return to the top through JavaScript scroll, control the horizontal and vertical directions

<a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>

Copy after login

3. Through JavaScript control, slide upward slowly, but not smooth enough

<a onclick="goScrollTop()">JavaScript缓慢向上滑动</a>

Copy after login

function goScrollTop() {
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    //向上是负数，向下是正数
    window.scrollBy(0, -100);
    //延时递归调用，模拟滚动向上效果
    scrolldelay = setTimeout(&#39;goScrollTop()&#39;, 100);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
    var sTop = document.documentElement.scrollTop + document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if (sTop == 0) clearTimeout(scrolldelay);
}

Copy after login

4. When the scroll bar scrolls to a certain position, it is displayed. When the scroll bar is rolled back, it is hidden and returns to the top. Button, this method is the most commonly used method

<div class="goTop">
    <span>Go</span>
</div>

Copy after login

jQuery code:

function goTop(min_height) {
    $(".goTop").click(
        function() {
            $(&#39;html,body&#39;).animate({
                scrollTop: 0
            }, 700);
        });
    //获取页面的最小高度，无传入值则默认为600像素
    min_height=min_height?min_height:400;
    //为窗口的scroll事件绑定处理函数
    $(window).scroll(function() {
        //获取窗口的滚动条的垂直位置
        var s = $(window).scrollTop();
        //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
        if (s > min_height) {
            $(".goTop").fadeIn(100);
        } else {
            $(".goTop").fadeOut(200);
        }
    });
}
 
 
$(function() {
    goTop();
});

Copy after login

css code:

.goTop {
    height: 40px;
    width: 40px;
    background: red;
    border-radius: 50px;
    position: fixed;
    top: 90%;
    right: 3%;
    display: none;
}
 
.goTop span {
    color: #fff;
    position: absolute;
    top: 12px;
    left: 8px;
}

Copy after login