前端屏幕滚动效果_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:46 AM

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

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

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

第一种方法最简单，只要利用锚点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 是滚动的方式有时间的朋友可以去看看这个，挺好玩

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

1	`帮到你了么？喜欢就点赞吧！^_^`

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7360

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，