您现在的位置是:首页 > 学无止境> 程序人生网站首页慢生活

完美实现一个“回到顶部”

张帅2019-11-04 752人围观
简介 在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要的效果是要有点缓冲效果。

(给前端大全加星标,提升前端技能


原文链接:点击进入

前言

在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要的效果是要有点缓冲效果。

现代浏览器陆续意识到了这种需求,scrollIntoView意思是滚动到可视,css中提供了scroll-behavior属性,js有Element.scrollIntoView()方法。

scroll-behavior

scroll-behavior属性可取值auto|smooth|inherit|unset

scroll-behavior: smooth;是我们想要的缓冲效果。在PC浏览器中,页面默认滚动是在<html>标签上,移动端大多数在<body>标签上,在我们想要实现平滑“回到顶部”,只需在这两个标签上都加上:

html, body {  scroll-behavior: smooth;}

准确的说,写在容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑,而不局限于<html><body>标签。

利用这个css属性可以一步将原来纯css标签直接切换,变成平滑过渡切换效果。

.tab label {

  padding: 10px;

  border: 1px solid #ccc;

  margin-right: -1px;

  text-align: center;

  float: left;

  overflow: hidden;

}


.tab::after {

  content: "";

  display: table;

  clear: both;

}


.box {

  height: 200px;

  border: 1px solid #ccc;

  scroll-behavior: smooth;

  overflow: hidden;

  margin-top: 10px;

}


.item {

  height: 100%;

  position: relative;

  overflow: hidden;

}


.item input {

  position: absolute;

  top: 0;

  height: 100%;

  width: 1px;

  border: 0;

  padding: 0;

  margin: 0;

  clip: rect(0 0 0 0);

}


<h1>纯CSS选项卡</h1>

<div class="tab">

  <label for="tab1">选项卡1</label>

  <label for="tab2">选项卡2</label>

  <label for="tab3">选项卡3</label>

</div>

<span class="" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overf

文章评论

    已有 5 条评论

    TheBaiRuo

    6666棒棒的!

    樱花谷 2019-11-07 16:31:50

    TheBaiRuo

    66666666

    FAN 2019-11-06 16:56:33

    TheBaiRuo

    名称:妙笔生花
    简介:一生很长,会遇见很多出现在你生命中的过客!
    网址: https://blog.zh66.club
    LOGO:http://blog.zh66.club/usr/themes/Miracles/favicon.ico

    妙笔生花 2019-11-01 14:44

    TheBaiRuo

    名称:皮皮家园
    简介:要让平凡的每一天,变得不再平凡!
    网址: https://www.zh66.club
    LOGO:https://cdn.jsdelivr.net/gh/Zevs6/CDN@3.0/img/avatar.jpg

    皮皮家园 2019-11-01 20:44

    admin

    小伙伴们快来评论留言吧!

    admin 2019-11-01 11:15

    添加新评论