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. 自定义readonly属性的用法

    具有readonly特性的属性,相当于仅对外提供一个读取接口,在实现文件中是不会自动生成对应的成员变量的,因此使用方法为: // MyItem.h @interface MyItem : NSObje ...

  2. 设置Beyond Compare 为 Git 默认的比较工具

    对于Beyond Compare4,Git版本号在2.2.0之后的,请在Git中依次输入以下命令: git config --global diff.tool bc3 git config --glo ...

  3. 简单的HttpClient使用

    Httpclient用途很广泛,用来处理各种http请求,这里举个简单的例子 去查询QQ邮件登陆账号检测是的verifycode,一直想怎么能够代码登陆 QQ邮箱,但是QQ的登陆机制做的太TMD牛逼了 ...

  4. js兼容性问题总结

    JS中出现的兼容性问题的总结1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题  我们都知道js通过style不可以获取行外样式,当我们需要获取行外 ...

  5. const、static和extern的正确使用方式

    我们在看一些大牛的第三方时,里面会出现很多const.static和extern,尤其是const和static,const和extern的结合使用,直接令很多小伙伴懵逼了,今天就详细讲解一下这三个关 ...

  6. Nudnik Photographer -Ural1260动态规划

    Time limit: 1.0 second Memory limit: 64 MB If two people were born one after another with one second ...

  7. 《利用python进行数据分析》读书笔记 --第一、二章 准备与例子

    http://www.cnblogs.com/batteryhp/p/4868348.html 第一章 准备工作 今天开始码这本书--<利用python进行数据分析>.R和python都得 ...

  8. 遗传算法在JobShop中的应用研究（part4:变异）

    下面,我们以车间调度为例来谈谈遗传算法中的另一个重要操作变异.变异操作通常发生在交叉操作之后,它的操作对象是交叉得到的新染色体.在本文中我们通过随机交换染色体的两个位置上的值来得到变异后的染色体,变异 ...

  9. JavaScript数组类型

    特点 动态长度 一个数组里面的元素可以是不同类型 数组的length属性不是只读属性,可通过length延长数组也可以删减数组的长度 定义数组两种方法 //方法一: var names = new A ...

  10. Query Designer：公式冲突

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...