Ever read a really long blog post or article and then had to scroll all the way up to the top of the screen to get to the menu? It can be a little frustrating. It’s easy to fix, you can have a fixed menu or as you’ll see here you can provide a quick and stylish way to get back to the top.

Getting Started

HTML wise all we need to do is add a “back to top” link at the bottom of the blog post

<a href="#" class="back-to-top">Back to Top</a>

We then need to style and position it. Here I’m setting its position to fixed and moving it to the bottom right side of the screen. I’ve also given it a semi-transparent background and finally hidden it. To make it stand out a little more, I’ve also given it a hover effect to darken the background a little.

.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
} .back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
}

The jQuery

First off we need to add jQuery to our page, you can do this by adding a script tag like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Or, if you’re using WordPress like this using add_action and wp_enqueue_script

function theme_enqueue_script(){
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_script');

The actual jQuery function is pretty simple, first we set our offset (after how much scrolling from the top we want the button to appear) and how long we want the scroll to top effect to last. We don’t want it to be too quick, but if it’s really slow it will be annoying. I’ve set it here to half a second.

We then need to make our button visible when the user scrolls. To do this we use the jQuery scroll function. In this function we grab the current scroll position using scrollTop , check to see if it is greater than our offset and if it is we show the button using the fadeIn function. If it’s not we make sure the button is not visible using the fadeOut function.

To actually scroll to the top, we need to intercept the click event on our button. First we prevent the default click from being triggered, and then we scroll back to the top using the animate function, passing in our duration. Finally we return false to ensure that no other events are raised after this.

jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
}); jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});

And here it is, a quick, simple but effective way of getting back to the top of a page.

http://www.tuicool.com/articles/iEZFBv

Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll的更多相关文章

  1. 第二十三课:jQuery.event.add的原理以及源码解读

    本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...

  2. 错误源:WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).

    Server Error in '/' Application. WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping ...

  3. WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).

    新开一个Web site.没有使用jQuery,当Insus.NET使用一些验证控件时,如RequiredfieldValidator,程序出现下面错误: WebForms UnobtrusiveVa ...

  4. jquery的add()用法总结

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

  5. jquery的add()方法扩大选择返回

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

  6. [Tools] Add a Dynamic Tweet Button to a Webpage

    To let people easily share the patio11bot, we'll add a "Tweet" button to the page. You can ...

  7. jquery remove/add css

    <input type="submit" class="btn btn-primary" id="submit" value=&quo ...

  8. jQuery EasyUI - Add link to datagrid cell

    Extracted from: http://stackoverflow.com/questions/16061894/jquery-easyui-add-link-to-cell HTML: < ...

  9. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

随机推荐

  1. GLOG使用注意事项

    FLAGS_stderrthreshold     输出到stderr的门限,默认为2(ERROR),默认,ERORR以下的信息不打印到终端 FLAGS_alsologtostderr 当这个全局变量 ...

  2. shell判断一个变量是否为空

    判断一个变量是否为空 . 1. 变量通过" "引号引起来 如下所示:,可以得到结果为 IS NULL. #!/bin/sh para1= if [ ! -n "$para ...

  3. And Then There Was One

    http://poj.org/problem?id=3517 And Then There Was One Time Limit: 5000MS   Memory Limit: 65536K Tota ...

  4. 线程NSThread的使用

    // // ZYThreadViewController.h // Thread // // Created by yejiong on 15/11/4. // Copyright © 2015年 z ...

  5. 完全自定义 TabBar

    // // CustomTabBarController.h // Dream // // Created by mac on 14-10-17. // Copyright (c) 2014年 HM. ...

  6. Sublime Text 2 实用快捷键[Mac OS X]

    lucasfais 总结了一些非常实用的 Sublime Text 2 快捷键,Lucifr 将它们翻译成了中文,以方便查阅. 注意:修饰键(如⌘)后跟多个按键的情况表示在按住修饰键的情况下依次按下相 ...

  7. linux的cron服务及应用

    Linux下的Cron用于定时执行设置的周期性指令,是Linux的内置服务,可以用以下的方法启动.关闭这个服务: /sbin/service crond start //启动服务 /sbin/serv ...

  8. JQuery合并列(可用于导出Word)

    在网上找了一些JQuery合并列的例子,但是都是用.hide()的方式,这样导致了在导出Word的时候表格严重变形 自己写了一个用.remove()方式的合并列 function arrangeTab ...

  9. Android之View方法

    onFinishInflate() 回调方法,当应用从XML加载该组件并用它构建界面之后调用的方法 onMeasure() 检测View组件及其子组件的大小 onLayout() 当该组件需要分配其子 ...

  10. 省市数据递归加载到TreeView

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...