ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery返回顶部插件

2021-12-20 20:58:00  阅读:212  来源: 互联网

标签:jQuery opacity 插件 顶部 top 返回 cd visible


下载地址

一款超级简洁实用的jQuery返回顶部插件。该返回顶部插件在页面滚动到一定高度时自动出现,用户点击它后会以平滑的方式滚动到页面顶部。返回顶部按钮能够帮助用户快速平滑的返回到页面的顶部。HTML结构在body标签结束之前添加返回顶部按钮: Top CSS样式返回顶部按钮始终出现在页面的右边。初始化时它是不可见的:visibility:hidden; 和 opacity:0;。这两个属性可以通过2个class来控制:.cd-is-visible 和.cd-fade-out。.cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1;}.cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5;}JAVASCRIPT在demo中,我们使用三个变量来控制返回顶部按钮:var offset = 300, //browser window scroll (in pixels) after which the "back to top" link opacity is reduced offset_opacity = 1200, //duration of the top scrolling animation (in ms) scroll_top_duration = 700;offset变量用于切换.cd-is-visible类。offset_opacity用于控制.cd-fade-out。返回顶部的动画使用的是jQuery .animate()方法。

9007193a0e330341fde8cc3e18159fad9760.jpg

dd:

标签:jQuery,opacity,插件,顶部,top,返回,cd,visible
来源: https://blog.csdn.net/amohan/article/details/122050193

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有