返回顶部

来源：互联网发布：黄光裕太子知乎编辑：程序博客网时间：2024/04/28 01:39

点击返回顶部，简单易学

效果图：

第一步：将返回按钮fixed到具体位置后隐藏

第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐藏

第三步：点击滚动

代码：

<!doctype html><html><head><meta charset="utf-8"><title>返回顶部</title><meta name="Keywords" content="关键词,关键词"><meta name="Description" content=""><!--css,js--><style type="text/css">*{margin:0;padding:0;}p{width:300px; height:200px;background:#ccc; margin:10px auto;}.top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;}.top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;}</style><script type="text/javascript" src="js/jquery.js" ></script></head><body><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><div class = "top"><span></span></div><script type = "text/javascript">//返回顶部的小图标的现隐$(window).scroll(function(){if($(window).scrollTop() >= 100){$(".top").fadeIn(600);}else{$(".top").stop(true,true).fadeOut(600);}});//返回顶部$(".top").click(function(){$("html,body").animate({scrollTop:0},800);});</script></body></html>

Jquery和箭头图片，请读者自己准备吧；或者换其他图片，比如火箭之类的。

转载请注明来源：http://blog.csdn.net/qq_19558705/article/details/49851879

更多干货等你来拿 http://www.itit123.cn/

1 0