整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html中如何写“返回顶部按钮”?

var topBtn = document.getElementById('top');
// 获取视窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
    // 获取页面向上滚动距离,chrome浏览器识别document.body.scrollTop,而火狐识别document.documentElement.scrollTop,这里做了兼容处理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滚动超过一屏,返回顶部按钮出现,反之隐藏
    if(toTop>=winHeight){
        topBtn.style.display = 'block';
    }else {
        topBtn.style.display = 'none';
    }
}
topBtn.onclick=function () {
    var timer = setInterval(function () {
        var toTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 判断是否到达顶部,到达顶部停止滚动,没到达顶部继续滚动
        if(toTop == 0){
            clearInterval(timer);
        }else {
            // 设置滚动速度
            var speed = Math.ceil(toTop/5);
            // 页面向上滚动
            document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
        }
    },50);
}

大家介绍如何通过 JS/CSS 实现网页返回顶部效果。

CSS 按钮样式:

#myBtn {

display: none; /* 默认隐藏 */

position: fixed;

bottom: 20px;

right: 30px;

z-index: 99;

border: none;

outline: none;

background-color: red; /* 设置背景颜色,你可以设置自己想要的颜色或图片 */

color: white; /* 文本颜色 */

cursor: pointer;

padding: 15px;

border-radius: 10px; /* 圆角 */

}

为围绕 Servo 开源网络引擎并使其可用于嵌入式目的的新努力的一部分,Servo 引擎在最近几周内增加了许多新功能。在过去的一个月里,Servo 增加了更多的功能,包括最终支持"text-align: justify"以及 text-align-last、line-height 和 vertical-align 属性。

此外,新的布局引擎还开始支持粘贴定位和表格。此外,Servo 正在从浮点坐标转向定点坐标。

此外,Servo 还更新了 WebGPU、GStreamer 和 ANGLE 库。

同时,Servo 的基本示例 Web 浏览器现已支持......后退和前进按钮:

此外,Linux 基金会欧洲利益相关者和 Igalia 等人还对代码进行了稳定性改进、崩溃修复和其他一般修复。

有关 Servo 改进的更多详情,请访问Servo.org 博客。