“返回顶部”实现一例

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

效果有以下几个方面：

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

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

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

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

方法和代码如下：

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

2、JS代码

/*返回顶部*/
var right = ($(window).width() - 1070) / 2 + "px";
var $backToTopTxt = "返回顶部"
, $backToTopEle = $('<div id="divBackTop"></div>').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;}

转载于:https://www.cnblogs.com/leftfist/p/4257953.html

“返回顶部”实现一例相关推荐

jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
扒皮下音悦台的“返回顶部”图标效果
昨晚想仿造下音悦台首页"返回顶部"的小超人效果,觉得这东西的实现很简单,应该不会费时超过一个钟.结果撸代码的过程发现存在很多意想不到的问题. 先发个图: 有兴趣的朋友可以去音悦台点 ...
axure下移固定地方_axure固定元件位置教程：使用axure动态面板制作一个返回顶部的按钮...
许多网站上都有一个"返回页首"按钮.无论屏幕如何滚动,"返回顶部"按钮始终浮动在固定位置,随时可用.一旦点击它,他就像一个小小的火箭,摇晃起来,页面将返回页面顶 ...
“返回顶部”的简易代码及设计理念
1.介绍及思路分析: 在很多公司的网站中,鼠标滚动一定高度(以150px为例)之后,会出现"返回顶部"的标签. "返回顶部"标签被固定到窗口的指定位置,位置始终 ...
移动端的返回顶部悬浮按钮还需要存在吗？
一. 返回顶部悬浮按钮的出现返回顶部悬浮按钮大家都不陌生,在pc端浏览网页的时候都会在右下角出现,方便用户点击后直接返回到顶部.产品功能都是为了解决用户的需求而出现的,返回顶部悬浮按钮也是如此.那么 ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
在octopress中增加“返回顶部”按钮
为什么80%的码农都做不了架构师?>>> <div id="main"><article class="hentry" ...

“返回顶部”实现一例

“返回顶部”实现一例相关推荐

最新文章

热门文章