博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改。

一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一个,是基于 jQuery 的,用起来还不错。

常见的“返回顶部”分这么3种:把返回顶部按钮放在页面最底部的,返回顶部按钮在滚动距离大于一定的距离后显示出来的,还有就是滚动距离大于 0 的时候就显示出来,喜欢最后这种,嗯,就它了~ 做好了贴出来共享下:)

HTML:

用两个 span 标签去模拟一个向上的箭头。

<div class="returnTop" title="嗖的就上去了!">
<span class="s"></span>
<span class="b"></span>
返回顶部
</div>

CSS:

用 css 去模拟三角形很给力,不仅兼容性很好,而且可用的地方还非常多。这个东西用嘴说不好理解,看例子就一目了然了,更多的用 css 模拟三角形的详解和用法可以看看我写的这篇文章《三种纯CSS实现三角形的方法》。

.returnTop {
position: fixed;
_position: absolute;
right: 10px;
bottom: 200px;
_bottom: auto;
display: none;
width: 40px;
height: 40px;
border: 1px solid #61b72e;
border-radius:4px;
background: #fff;
box-shadow: 0 0 5px #F5F5F5;
text-indent: -9999px;
cursor: pointer;
}
.returnTop .s {
position: absolute;
top: -2px;
_top: -20px;
left: 10px;
width: 0;
height: 0;
border-width: 10px;
border-color: transparent transparent #61b72e;
border-style: dashed dashed solid;
}
.returnTop .b {
position: absolute;
top: 18px;
left: 16px;
height: 12px;
width: 8px;
background: #61b72e;
}

Javascript:

代码很容易看懂,这里主要注意的是 IE6 定位那块:

!-[1,] 是一个俄国人写的,利用 IE 与标准浏览器在处理数组的 toString 方法时的差异,6个字符就可以判断出 IE 浏览器,再加上 IE6 不支持 XMLHttpRequest 对象,就能更稳健的判断出 IE6 了。

scrollTopNum + winHeight 等于滚动条垂直方向的偏移量 + 当前屏幕的高度 = 完整网页的高度。

$(function(){
// 给 window 对象绑定 scroll 事件
$(window).bind("scroll", function(){ // 获取网页文档对象滚动条的垂直偏移
var scrollTopNum = $(document).scrollTop(),
// 获取浏览器当前窗口的高度
winHeight = $(window).height(),
returnTop = $("div.returnTop"); // 滚动条的垂直偏移大于 0 时显示,反之隐藏
(scrollTopNum > 0) ? returnTop.fadeIn("fast") : returnTop.fadeOut("fast"); // 给 IE6 定位
if (!-[1,]&&!window.XMLHttpRequest) {
returnTop.css("top", scrollTopNum + winHeight - 200);
} }); // 点击按钮后,滚动条的垂直方向的值逐渐变为0,也就是滑动向上的效果
$("div.returnTop").click(function() {
$("html, body").animate({ scrollTop: 0 }, 100);
}); });

返回顶部还有一个最简单的方法:  <a href=”javascript:scroll(0,0)”>返回顶部</a>

猛击demo ☻

简约的返回顶部效果(jQuery)的更多相关文章

  1. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  2. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  3. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  4. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  5. jQuery 返回顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  7. HTML页面实现返回顶部效果 go to top

    1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(". ...

  8. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  9. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

随机推荐

  1. poj 2318 TOYS

    TOYS 题意:给定一个如上的长方形箱子,中间有n条线段,将其分为n+1个区域,给定m个玩具的坐标,统计每个区域中的玩具个数. 思路:这道题很水,只是要知道会使用叉乘来表示点在线的上面还是下面: 当a ...

  2. C语言-06复杂数据类型-04 结构体

    结构体的说明(构造类型) 数组:只能由多个相同类型的数据构成 结构体:可以由多个不同类型的数据构成 ,结构体的类型是不存在的,自己定义 int main() { // 1.定义结构体类型 定义类型的时 ...

  3. arm-linux-gcc中对“inline”的处理

    C++对于关键字“inline”的处理大家都知道,C++编译器对于内敛函数就是把它当做一个宏展开.这样可能会增加程序的代码量,却可以减少程序入栈和出栈的此处,从而影响程序的执行速度.但是,C语言中扩展 ...

  4. ssh登录docker容器

    ssh登录docker容器1.启动一个docker容器# docker run -t -i ubuntu/ruby:v1 /bin/bash2.然后在容器里,安装openssh-server open ...

  5. BZOJ 1592: [Usaco2008 Feb]Making the Grade 路面修整

    Description FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求,修好后的路面高度应当单调上升或单调下降,也就是说,高度上升与高度下降的路段不能同时出现在修好的路中. 整条路被分成了 ...

  6. 运维安全系列基础服务之 FTP 服务(系列一)

    做了多年运维工程师,积攒了一些经验,和大家分享下.个人认为,运维安全话题的系列,主要包括下面四个方面: 基础服务 网络层 应用层 云安全 今天主要讲的是基础服务里面的[FTP服务][ftp]. 文件传 ...

  7. C盘瘦身,可以让你的电脑C盘恢复到刚安装时的大小

    @echo offecho 正在清理系统垃圾文件,请稍等......del /f /s /q %systemdrive%\*.tmpdel /f /s /q %systemdrive%\*._mpde ...

  8. android 双向滑动 seekbar

    实现原理: 1.自定义View,在onDraw(Canvas canvas)中,画出2个Drawable滑动块,2个Drawable滑动条,2个Paint(text) 2.监听onTouchEvent ...

  9. Android 通过代码设置radiobutton不同方位图标的两种方法

    更换radiobutton中的图片在xml中很好设置,但对于初学者如何在代码中设置还是不容易找的.没法子,通过看原版api找到两个方法,setCompoundDrawables和setCompound ...

  10. CentOS 如何将.deb 文件 转换.rpm

    CentOS 如何将.deb 文件 转换.rpm [root@localhost tmp]#tar zxvf alien_8.88.tar.gz [root@localhost alien]#perl ...