CSS 回到顶部编码示例

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

如今的网站基础上全是长网页页面,多的有45屏,少的话也是有两3屏,网页页面过长有的情况下以便提高客户体验,会在网页页面右侧出現1个返回顶部的按钮,这样能迅速返回顶部,以防在拖动网页页面出現视觉效果显示屏,返回顶部1般有4种方法。

1.根据锚连接返回顶部,必须将body添加1个名为top的标识:

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

2.根据JavaScript的scroll返回顶部,操纵水平静竖直方位:

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

3.根据JavaScript操纵,迟缓向上拖动,但是不足光滑,编码参照以下:

<a onclick="goScrollTop()">JavaScript迟缓向上拖动</a>
function goScrollTop() {
    //把內容翻转特定的像素数(第1个主要参数是向右翻转的像素数,第2个主要参数是向下翻转的像素数)
    //向上是负数,向下是正数
    window.scrollBy(0, ⑴00);
    //延时递归启用,仿真模拟翻转向上实际效果
    scrolldelay = setTimeout('goScrollTop()', 100);
    //获得scrollTop值,申明了DTD的规范网页页面取document.documentElement.scrollTop,不然取document.body.scrollTop;由于2者仅有1个会起效,另外一个就恒为0,因此取和值能够获得网页页面的真实的scrollTop值
    var sTop = document.documentElement.scrollTop + document.body.scrollTop;
    //分辨当网页页面抵达顶部,撤销延时期码(不然网页页面翻转到顶部会没法再向下一切正常访问网页页面)
    if (sTop == 0) clearTimeout(scrolldelay);
}

4.当翻转条翻转到1精准定位置的情况下显示信息,翻转条向上回退的情况下掩藏向上的返回顶部按钮,这类方法是最常见的方法:

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

jQuery编码:
 

function goTop(min_height) {
    $(".goTop").click(
        function() {
            $('html,body').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();
});

CSS编码:

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


到此这篇有关CSS 回到顶部编码示例的文章内容就详细介绍到这了,更多有关CSS回到顶部 內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

作者:FlyElephant
出处:http://www.cnblogs.com/xiaofeixiang