时间:2021-05-26
本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下
效果图:
实现代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ height: 2000px; } .gotop{ display: block; width: 32px; height: 32px; background-color: red; text-align: center; text-decoration: none; font-size: 14px; font-weight: bold; color: white; line-height: 32px; position: fixed; right:50px; bottom:50px; opacity: 0; } </style></head><body> <div class="wrap"> <a href="###" class="gotop">TOP</a> </div> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ // 当滚动条滚动大于200时出现,未大于,消失 $(window).scroll(function(){ if($(document).scrollTop()<200){ // alert("kk"); $(".gotop").stop().animate({ opacity: 0 },1000) } else{ $(".gotop").show().stop().animate({ opacity: 1 },1000) } }) // 返回顶部 $(".gotop").on("click",function(){ $("html body").animate({ scrollTop:0 },1000) }) }) </script></body></html>希望本文所述对大家学习javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素:返回顶部其中a标签指向锚点top,可以在顶部防止
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素:返回顶部其中a标签指向锚点top,可以在顶部防止
jquery12个常用功能极好的,快来围观!返回顶部使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画://Backtotop
在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果。感兴趣的朋友跟着小编一起看下实现代码吧。首先需要在顶部添加如下ht
本文实例讲述了jQuery实现页面顶部显示的进度条效果。分享给大家供大家参考,具体如下:具体代码如下:页面顶部显示的进度条效果//<![CDATA[jQuery