主页
WEB前端开发

jQuery点击“返回顶部”滑动过度效果 轻松加

菜小编
WEB前端开发
4
2018-3-25

利用jQuery,直接在网站底部文件加代码:

<a href="#" id="top"> 返 回 顶 部 </a>

CSS代码,使用了fixed让对象固定于浏览器窗口:

#top{position:fixed;bottom:0;right:10px;}

jQuery代码,注意正常使用的几个条件:

$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
THE END
jQuery
IntersectionObserver api实现图片懒加载实例代码
<<上一篇
前端开发两种方式实现图片懒加载(lazyload)示例
下一篇>>
相关推荐
HTML5学习大纲,菜鸟必看必遵循!
CSS伪元素别再只用来做装饰!点击事件也能搞定
CSS 新特性 :has() 选择器,不需要 JS 也能实现神奇交互
CSS伪元素用不好?一文搞懂使用场景及高级应用技巧
CSS变量var()搞定响应式背景图,这招真香!
前端CSS技巧:如何优雅地实现网页图片自适应显示?
使用 HTML + JavaScript 实现滑动框选功能(附完整代码)
前端vue开发技巧:使用原生fetch 发送post请求

文章列表

1 thumbnail
小白学习python之路之思路篇
2
thumbnail
Vue.js实现浮动按钮组件 - 页面滚动时自动隐藏 - 可拖拽
WEB前端开发
3
thumbnail
javascript之promise化微信小程序api的使用方法
移动开发
4
thumbnail
快影内测多款AIGC新功能,短视频智能创作时代即将到来?
AI绘画与短视频剪辑
5
thumbnail
Midjourney8种经典的色彩运用技巧(含提示)
设计达人

灵知AI工具集,绘画、办公、生成PPT...