zoukankan      html  css  js  c++  java
  • CSS让页面平滑滚动

    我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部,就写如下代码:

    $(‘.js_go_to_top‘).click(function () {
        $(".js_scroll_area").animate({scrollTop: 0}, 600);
    });
    

      

    我们现在可能通过css实现这一功能了,只需要添加一句样式即可:

    scroll-behavior:smooth
    

      

    兼容情况可以点击这里查看。

    摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html

    scroll-behavior的使用你就记住这么一句话——

    凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

     

    你别管他用不用得到,也不用管浏览器兼容性如何,你都加上。这就像一个不要钱的免费抽奖,没有中奖,没关系,又没什么损失,中奖了自然好,锦上添花!scroll-behavior:smooth就是这种尿性。

    举个例子,在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的css reset都可以加上这么一条规则:

    html, body { scroll-behavior:smooth; }
    

      

    
    
     
  • 相关阅读:
    进程总结
    三大流程
    canvas简介
    时钟
    vim
    马拉车
    模拟退火
    洛谷P2055假期的宿舍
    洛谷P2320鬼谷子的钱袋.
    洛谷P2278操作系统
  • 原文地址:https://www.cnblogs.com/ypppt/p/13338070.html
Copyright © 2011-2022 走看看