Maison > Article > interface Web > 前端屏幕滚动效果_html/css_WEB-ITnose
前端屏幕滚动效果_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 08:46:271683parcourir
屏幕的滚动我这边给分成两种：
- 从某个位置直接滚动到最顶端
- 点击按钮到指定的位置，这个会涉及到 锚点
在我的文章《设置锚点的三种方法》里面有介绍到，不明白的朋友看一下。
第一种方法最简单，只要利用锚点id定位就可以直接实现了。这种这边就不多做介绍了，主要介绍第二种，会第二种，第一种都是小意思了
介绍第二种先来点代码，大家看的比较清楚：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>滚动</title> <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> </head> <body> <div class="classCont"> <div id="class1">1</div> <div id="class2">2</div> <div id="class3">3</div> <div id="class4">4</div> <div id="class5">5</div> </div> <div class="hrefCont"> <a href="#class1">1</a> <a href="#class2">2</a> <a href="#class3">3</a> <a href="#class4">4</a> <a href="#class5">5</a> </div> </body></html>
运行结果界面
运行后大家会发现没动画确实很生硬，一点都不友好。接下来我们来家电动画，在原来的基础上加入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 是滚动的方式有时间的朋友可以去看看这个，挺好玩
上面代码看懂的大神请不要嫌弃我啰嗦，具体的效果体验还是要大家自己动手实践了。如有更好方法请开尊口！
帮到你了么？喜欢就点赞吧！^_^
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：一个渣渣的前端学习之路_html/css_WEB-ITnoseArticle suivant：Android Native App与WebView交互技巧_html/css_WEB-ITnose