仿CSDN Blog返回页面顶部功能实现原理及代码

2016-02-19 10:36 3 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享仿CSDN Blog返回页面顶部功能实现原理及代码吧。

【 tulaoshi.com - Web开发 】

只修改了2个地方:
,返回的速度--改成了慢慢回去。(原来是一闪而返回)
,返回顶部图标出现的时机--改成了只要不在顶部就显示出来。(原来是向下滚动500px后才显示)

注意:JS务必要写在 Html之后;
HTML

代码如下:

div id="d-top" style="display:none;"
a id="d-top-a" href="#"
img src="http://img.warting.com/allimg/2015/1208/2246105440-0.png" alt="" //a
/div

Javascript代码

代码如下:

script type="text/javascript"
$(function(){
var d_top=$('#d-top');
document.onscroll=function(){
var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
if(scrTop500){
if(scrTop0){
d_top.show();
}else{
d_top.hide();
}
}
$('#d-top-a').click(function(){
$("html,body").animate({scrollTop: 0},500);
//scrollTo(0,0);
this.blur();
return false;
});
});
/script

CSS样式

代码如下:

#d-top {
position: fixed;
float: right;
z-index: 10;
right: 10px;
bottom: 40px;
}
#d-top img {
width: 42px;
opacity: 0.3;
}
img {
border: medium none;
}

来源:https://www.tulaoshi.com/n/20160219/1595177.html

延伸阅读
标签: Web开发
在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask。因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用。 代码如下: (function($){ $.extend({ documentMask: function(options){ // 扩展参数 var op = $.extend({ opacity: 0.8, z: 10000, bgcolor: '#000' }, options); // 创建一个 Mask 层...
今天模仿安卓QQ空间,效果如下:    打开程序的启动画面和导航页面我就不做了,大家可以模仿微信的那个做一下,很简单。这次主要做一下主页面的实现,下面是主页面的布局: 代码如下: ?xml version="1.0" encoding="utf-8"? LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width...
标签: Web开发
你好, 我很高兴认识你。我在网上,我在网上下载了分类信息网的代码,上传到空间里,但是空间要求的默认主页名字是 index.htm 但是这个提供代码的主页名字是pop_ad,结果是打不开网页 我的建议如下: 你好 可以使用跳转代码,把主页指向pop_ad 你看看我的404页面 http://www.jb51.net/404 只需要在页面加入一行代码 meta&...
标签: Web开发
JS代码如下。 在调用Ajax返回后。一个奇怪的问题。返回的resultString值是“ok”但是跟字符串"ok"比较确不相等。 Ajax调用out.println()返回的都添加了哪些参数? 放开注释的部分也过滤不掉。 哪位高手遇到过类似的问题。 如何解决的。 请说一下。out.println();返回的到底是个啥。 Js代码 代码如下: // 本地下载 function FTPTest(...
今天根据腾讯qq,我们做一个练习,来学习如何制作一个漂亮的布局。首先看一下官方图片 还是一个启动画面,之后进入登录页面,导航页面就不介绍了,大家可以参考微信的导航页面。首先程序进入SplashActivity,就是启动页面,Activity代码如下: 代码如下: package com.example.imitateqq; import android.app.Activity; import android...

经验教程

299

收藏

74
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部