首页 > 代码库 > html回到顶部代码
html回到顶部代码
HTML代码 <p id="back-to-top"><a href="http://www.mamicode.com/#top">返回顶部</a></p> CSS代码 p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } js代码 $(function(){ //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1500); } }); //当点击跳转链接后,回到页面顶部位置 $("#back-to-top").click(function(){ if ($(‘html‘).scrollTop()) { $(‘html‘).animate({ scrollTop: 0 }, 100);//动画效果 return false; } $(‘body‘).animate({ scrollTop: 0 }, 100); return false; }); }); });
记得要引用jQuery文件
html回到顶部代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。