美文网首页
网页中"返回顶部"的实现

网页中"返回顶部"的实现

作者: Toplhyi | 来源:发表于2019-02-13 16:31 被阅读0次

定义返回顶部按钮的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; /* 圆角 */
} 
#myBtn:hover {    
        background-color: #555; 
}

添加js代码:

// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() { 
        scrollFunction()
}; 
function scrollFunction() { 
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {        
                document.getElementById("myBtn").style.display = "block";    
        } else {
                document.getElementById("myBtn").style.display = "none";    
        }
}

// 点击按钮,返回顶部
function topFunction() { 
        document.body.scrollTop = 0;    
        document.documentElement.scrollTop = 0;
}

相关文章

  • 网页中"返回顶部"的实现

    定义返回顶部按钮的css样式如下(可以根据需要自己调整): 添加js代码:

  • 返回顶部的几种方法

    有时候网页太长,我们想要回到网页顶部很麻烦。 这时候我们需要一个返回顶部的效果。 要实现返回顶部,有很多方法。 1...

  • a标签的灵活运用

    ①通过a标签返回顶部 这是一个许多网页必备的功能,通过a标签,可以轻松的实现它。 返回顶部 注意:href属性为空...

  • Axure实现网页返回顶部功能

    hi,大家好,这里是小黄。 今天想教大家用axure实现网页返回顶部功能 首先我们打开axure,打开page1,...

  • React中返回顶部的实现

    首先监听点击事件 scrollTo()方法中需要一个ScrollToOptions, 自定义一下设置为 'smoo...

  • 关于页面返回顶部那些事

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户...

  • 返回顶部实现

    当用户下拉一定距离,显示返回顶部按钮 监听下拉 返回顶部

  • 平滑滚动和涉及到的元素尺寸

    网页常见的返回顶部,这个平滑滚动效果有三种实现方式: 给 html 加 CSS 属性,behavior 滚动 DO...

  • 移动端的返回顶部悬浮按钮还需要存在吗?

    一、 返回顶部悬浮按钮的出现返回顶部悬浮按钮大家都不陌生,在pc端浏览网页的时候都会在右下角出现,方便用户点击后...

  • vue下返回顶部功能实现

    vue下返回顶部功能实现 Vue中点击按钮回到顶部(滚动效果) vue中回到顶部 vue滚动到一定位置显示置顶元素...

网友评论

      本文标题:网页中"返回顶部"的实现

      本文链接:https://www.haomeiwen.com/subject/hyudeqtx.html