CSS3之scroll-behavior描点动画效果

最新推荐文章于 2023-12-14 15:04:33 发布

yaoxinsong

最新推荐文章于 2023-12-14 15:04:33 发布

阅读量384

点赞数

分类专栏： CSS CSS3动画效果

本文链接：https://blog.csdn.net/qq_23159841/article/details/109693479

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS3动画效果

2 篇文章 0 订阅

订阅专栏

scroll-behavior

// https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior
// 默认auto没有滚动动画效果
scroll-behavior: smooth;

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body,html{
				/* 默认值auto */
				scroll-behavior: smooth;
			}
			.a-bgbox {
				display: block;
				width: 100%;
				height: calc(100vh);
			}
			ul{
				position: fixed;
				right: 0px;
				top: 50%;
			}
		</style>
	</head>
	<body>
		<a class="a-bgbox" name="a1" style="background-color: aliceblue;">我是描点1</a>
		<a class="a-bgbox" name="a2" style="background-color: antiquewhite;">我是描点2</a>
		<a class="a-bgbox" name="a3" style="background-color: aqua;">我是描点3</a>
		<a class="a-bgbox" name="a4" style="background-color: aquamarine;">我是描点4</a>
		<ul>
			<li><a href="#a1" class="myid">aliceblue</a></li>
			<li><a href="#a2" class="myid">antiquewhite</a></li>
			<li><a href="#a3" class="myid">aqua</a></li>
			<li><a href="#a4" class="myid">aquamarine</a></li>
		</ul>
	</body>
	<script>
		// $(function(){
		//    $(".myid").click(function(){
		//        debugger;
		// 	   if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
		//            var $target = $(this.hash);
		//            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
		//            if ($target.length) {
		//                var targetOffset = $target.offset().top;
		//            $('html,body').animate({scrollTop: targetOffset},800);
		//            return false;
		//            }
		//        }
		//    });
		// });
	</script>
</html>

yaoxinsong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之scroll-behavior描点动画效果

scroll-behavior// https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior// 默认auto没有滚动动画效果scroll-behavior: smooth;代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试</title> <
复制链接

扫一扫