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

一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一个,是基于 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 1416 Shredding Company

    题目: http://poj.org/problem?id=1416 又16ms 1A了,这人品... #include <stdio.h> #include <string.h&g ...

  2. 定位- CLGeoencoder - 反编码

    #import "ViewController.h" #import "MBProgressHUD+MJ.h" #import <CoreLocation ...

  3. C/S和B/S两种软件体系结构

    目前两种流行的软件体系结构就是C/S和B/S体系结构,下面对两种体系结构进行一下总结: 1.C/S(客户端/服务器模式): 客户端和服务器都是独立的计算机,客户端是面向最终用户的应用程序或一些接口设备 ...

  4. mysql 时间字段的函数 timestamp

    Mysql 里格式 时间字段的函数 DATE_FORMAT unix_timestamp - 墨墨修行的日志 - 网易博客http://jjuanxi.blog.163.com/blog/static ...

  5. MIME

    http://www1.huachu.com.cn/read/readbookinfo.asp?sectionid=1000000558 http://www.jb51.net/hack/10623. ...

  6. CAS单点登录配置[2]:证书生成

    上一篇介绍了准备工作,本片将介绍如何生成证书. 服务器端证书 1 我们在F盘下建立一个cas文件夹,在此文件夹中生成证书文件,打开命令窗口,进入此目录下,如图: 2 生成服务器端证书, 此命令用于在当 ...

  7. ASPX在Debug模式下直接link原始CSS而非Bundle后的CSS

    由于对CSS做了bundle, debug的时候修改原始css文件不会直接反映到浏览器中, 效率较低. 于是我想在debug的时候直接link原始CSS. 很简单. <% #if DEBUG % ...

  8. eval

    字符串形式:表达式计算 Vsftp:/root/perl/14# cat aa 9 5 1 2 Vsftp:/root/perl/14# cat a1.pl open (A,aa); while ($ ...

  9. 【HDOJ】1890 Robotic Sort

    伸展树伤不起啊,很容易wa,很容易T,很容易M. /* 1890 */ #include <iostream> #include <string> #include <m ...

  10. 利用if else咱们结婚吧

    class Program    {        static void Main(string[] args)        {            while (true)           ...