CSS让页面平滑滚动
我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部,就写如下代码:
$('.js_go_to_top').click(function () {
$(".js_scroll_area").animate({scrollTop: 0}, 600);
});
我们现在可能通过css实现这一功能了,只需要添加一句样式即可:
scroll-behavior:smooth
兼容情况可以点击这里查看。
scroll-behavior
的使用你就记住这么一句话——
凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!
你别管他用不用得到,也不用管浏览器兼容性如何,你都加上。这就像一个不要钱的免费抽奖,没有中奖,没关系,又没什么损失,中奖了自然好,锦上添花!scroll-behavior:smooth
就是这种尿性。
举个例子,在PC浏览器中,网页默认滚动是在<html>
标签上的,移动端大多数在<body>
标签上,业界浏览器的CSS reset都可以加上这么一条规则:
html, body { scroll-behavior:smooth; }
参考文章:
CSS scroll-behavior和JS scrollIntoView让页面滚动平滑
CSS让页面平滑滚动的更多相关文章
- 【前端】jQuery实现锚点向下平滑滚动特效
jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...
- ScrollTo:实现平滑滚动到页面指定位置
ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...
- 页面中的平滑滚动——smooth-scroll.js的使用
正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...
- [js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 原生js 平滑滚动到页面的某个位置
window.scrollTo() 语法1: window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...
- scrollTop如何实现click后页面过渡滚动到顶部
用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...
- scrollIntoView 与平滑滚动
经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分.对于这样的需求,很容易想到使用锚点实现.但有一个问题:滚动一步到位,太生硬了. 我还是比较喜欢平滑滚动.HTML5 中提供了 CSS ...
- 用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
随机推荐
- asp.net core2.0学习笔记
一.Core 1,防止过度发布 2,Main 3,Startup 4,添加过滤器 5,依赖注入 6,中间件 7,静态文件 8,路由 9,环境 10,配置和选项 11,日志 12,使用Sesstion ...
- OpenStack容器网络项目Kuryr(libnetwork)
转:https://www.aliyun.com/jiaocheng/518375.html 摘要:容器近几年非常流行,有很多项目都考虑将容器与SDN结合.Kuryr就是其中一个项目.Kuryr项目在 ...
- CodeForces903G Yet Another Maxflow Problem 扫描线 + 线段树 + 最小割
给定两条链\(A, B\),其中\(A\)链某些点向\(B\)链有连边,支持修改\(A\)链中的某条边权以及查询\(A_1\)到\(B_n\)的最大流 显而易见,\(A\)和\(B\)链中一定满足左部 ...
- 喵哈哈村的魔法考试 Round #15 (Div.2) 题解
哗啦啦村的奇迹果实(一) 题解:显然答案就是最大值减去最小值. #include<bits/stdc++.h> using namespace std; const int maxn = ...
- 【译】如何在 Android 5.0 上获取 SD卡 的读写权限
因为最近项目需要,涉及到 SD卡 的读写操作,然而申请 <!-- 读写权限 --> <uses-permission android:name="android.permi ...
- PID控制器(比例-积分-微分控制器)- II
Table of Contents Practical Process Control Proven Methods and Best Practices for Automatic PID Cont ...
- Synchronized、lock、volatile、ThreadLocal、原子性总结、Condition
http://blog.csdn.net/sinat_29621543/article/details/78065062
- 启动vmware虚拟机报错:“无法获得VMCI驱动程序的版本:句柄无效”
启动vmware虚拟机的时候报错: 找到对应虚拟机的文件夹路径: 用记事本打开CentOS 64位.vmx,找到这么一行: vmci0.present = "TRUE" 把TRUE ...
- virtualbox centos安装增强工具和Centos与VirtualBox共享文件夹设置
VirtualBox 大家都习惯性把它简称为 Vbox ,比 VM 的体积小.开源.速 度快.不过在使用 VirtualBox 在虚拟机中安装 CentOS 之后,不能直接运行安装好 Virtual ...
- 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis
在写代码之前我们先了解一下这三个框架分别是干什么的? 相信大以前也看过不少这些概念,我这就用大白话来讲,如果之前有了解过可以跳过这一大段,直接看代码! SpringMVC:它用于web层,相当于con ...