HTML:

<html>

<body>

<div id="back-to-top" style="cursor:pointer; display:block;">

上升按钮

</div>

</body>

</html>

JS:

$(function(){

        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

        $(function () {

            $(window).scroll(function(){

                if ($(window).scrollTop()>100){

                    $("#back-to-top").fadeIn(1500);

                }

                else

                {

                    $("#back-to-top").fadeOut(1500);

                }

            });

            //当点击跳转链接后，回到页面顶部位置

            $("#back-to-top").click(function(){

                $('body,html').animate({scrollTop:0},1000);

                return false;

            });

        });

    });

======

扩展升级:

点击菜单按钮, 动态滚动到对应位置.

HTML:

　　　　　　<div id="header_nav">

                        <ul>

                            <li>

                                <a href="#home">首页</a>

                            </li>

                            <li>

                                <a href="#download">下载</a>

                            </li>

                            <li>

                                <a href="#contact">联系</a>

                            </li>

                        </ul>

   　　　　</div>

JS:

// -- initial --

$(document).ready(function() {

    $("#header_nav a").click(function(){

        var selector=$(this).attr("href");

        var top = $(selector).offset().top;

        var current_top = $('body').scrollTop();

        var animate_time=  Math.abs( current_top - top ) * 0.8; // 800px per second.

        $('body,html').animate({scrollTop:top},animate_time);

        return false;

    });

});

[HTML/JS] JQuery 页面滚动回到顶部的更多相关文章

  1. js刷新页面不回到顶部

    今天遇到刷新页面不回到顶部的需求 window.location.reload();方法已经解决了问题,但是ie8不支持,后来采用的是锚点这个方法 window.location = '/plan/g ...

  2. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. js 刷新页面自动回到顶部

    <script type="application/x-javascript"> addEventListener("load", function ...

  4. URL链接后面的参数解析，与decode编码解码；页面刷新回到顶部jquery

    function request() { var urlStr = location.search; ) { theRequest = []; return; } urlStr = urlStr.su ...

  5. [jquery]判断页面滚动到顶部和底部（适用于手机web加载）

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  6. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  7. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  8. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

随机推荐

  1. 【原创】（AMD）JavaScript模块化开发（dojo）

    AMD原理等在这里就不进行说明了,作者也是菜鸟一枚,只是对自己的一个实例进行说明,如有错误,望指出. 首先,先推荐一篇AMD方面的文章,有兴趣的可以参考:http://efe.baidu.com/bl ...

  2. Mysql 5.7 Linux安装详细步骤

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下载安装包 http://dev.mysql.com/downloads/mysql/#downloads 推荐下载通用安装方法的TAR包(h ...

  3. header中Content-Disposition的作用

    在servlet3.0中 支持文件上传的注解@MultipartConfig 发现有个例子开头打印的信息中有Content-Disposition,一时好奇,所以了解了一下.顺便学习一下文件上传所需要 ...

  4. mysql 5.6 online ddl

    innodb存储引擎实现online ddl的原理是在执行创建或删除操作的同时,将DML操作日志写入到一个缓存中,待完成索引创建后再重做应用到表上,以此达到数据的一致性,这个缓存大小由参数innodb ...

  5. 快速增加sql数据

    declare @i int begin insert into dbo.w10test(Name) select Name from dbo.w10test end;

  6. C++内存泄露之野指针

    写出本文仅仅是处于备忘的目的. 最近为现在做的软件添加了一个内存回收机制(以前处于某种内存只申请不释放,这并不等于内存泄露,因为我们知道这些内存块在内存中的位置)-- 在某一块内存不使用的时候将其释放 ...

  7. JavaScript对象的chapterI

    对象: 对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体. 一.本地对象: 1.Date——日期对象 var myDate = new Date(); myDate.getFullYe ...

  8. Xcode 7免证书真机调试

    在Xcode 7中,苹果改变了自己在许可权限上的策略,此前Xcode只开放给注册开发者下载,但Xcode 7改变了这种惯有的做法,无需注册开发者账号,仅使用普通的Apple ID就能下载和上手体验.此 ...

  9. an interview question(4)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 写这篇博客前请让博主先吐糟下自己的PC. i3+2G内存+开了一上午=C盘剩下0字节+打开VS2012花了半个小时+一晚上的心情不好 吐槽完PC, ...

  10. web开发必备插件

    文本编辑器百度ueditor:http://ueditor.baidu.com/website/