前端屏幕滚动效果_html/css_WEB-ITnose

屏幕的滚动我这边给分成两种:

  • 从某个位置直接滚动到最顶端
  • 点击按钮到指定的位置,这个会涉及到 锚点

在我的文章《设置锚点的三种方法》里面有介绍到,不明白的朋友看一下。

第一种方法最简单,只要利用锚点id定位就可以直接实现了。这种这边就不多做介绍了,主要介绍第二种,会第二种,第一种都是小意思了

介绍第二种先来点代码,大家看的比较清楚:

            <meta charset="UTF-8">        滚动        <style type="text/css">            .classCont div {                height: 400px;                width: 200px;                border: 1px solid #000000;            }            .hrefCont{                position: fixed;                top: 50%;                left: 230px;            }            .hrefCont a{                display: block;                width: 20px;                height: 20px;                margin-bottom: 2px;                text-align: center;                line-height: 20px;                border: 1px groove #000000;                cursor: pointer;                text-decoration: none;            }        </style>        <body>        
1
2
3
4
5
1 2 3 4 5

运行结果界面

运行后大家会发现没动画确实很生硬,一点都不友好。接下来我们来家电动画,在原来的基础上加入js代码:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    <script type="text/javascript">        $(document).ready(function() {            $("a").click(function() {                $("html, body").animate({                    scrollTop: $($(this).attr("href")).offset().top + "px"                }, {                    duration: 500,                    easing: "swing"                });                return false;            });        });    </script>

点击相应的标签,对html和body标签执行整体动画处理,执行中获取标签href的属性值,这个值也就是锚点的id。

例如:点击右边浮动框 1 的时候,$($(this).attr("href"))等于$("#class1")。再获取 id 为 class1 顶部的偏移量,这个偏移量就是滚动的距离。之后设置一下滚动的时间和滚动的方式。

  • duration 是滚动的时间
  • easing 是滚动的方式有时间的朋友可以去看看这个,挺好玩

上面代码看懂的大神请不要嫌弃我啰嗦,具体的效果体验还是要大家自己动手实践了。如有更好方法请开尊口!

帮到你了么?喜欢就点赞吧!^_^

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: