“返回顶部”实现一例

“返回顶部”实现一例

网页中，返回顶部很普遍。现有一例子，主要靠图片 + Jquery + CSS来完成：

效果有以下几个方面：

1、页面在顶部或滚动到顶部时，“返回顶部”图片隐藏

2、当页面向下滚动时，“返回顶部”图片显现

3、鼠标未在“返回顶部”图片上面时，图片是灰的

4、鼠标移到“返回顶部”图片上面时，图片置亮（红色）

方法和代码如下：

1、有图片（/img/back_top.png）：

2、JS代码

/*返回顶部*/var right = ($(window).width() - 1070) / 2 + "px";var $backToTopTxt = "返回顶部", $backToTopEle = $('

').appendTo($("body")).css("right", right).attr("title", $backToTopTxt).click(function () { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function () { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0) ? $backToTopEle.fadeIn(2000) : $backToTopEle.fadeOut(2000); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); }};$backToTopEle.mouseover(function () { $backToTopEle.removeClass(); $backToTopEle.addClass("gtop2"); });$backToTopEle.mouseout(function () { $backToTopEle.removeClass(); $backToTopEle.addClass("gtop"); });$(window).bind("scroll", $backToTopFun);$(function () { $backToTopFun();});

3、CSS

#divBackTop { display: none; width: 45px; height:45px; background:url(/img/back_top.png) no-repeat left center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer;}.gtop{background:url(/img/back_top.png) no-repeat left center!important;}.gtop2{background:url(/img/back_top.png) no-repeat right center!important;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。