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. php + jQuery自动完成插件autocompleter

    autocompleter是一个简单的,容易的,可定制的自动完成功能插件,支持缓存. 1.引用脚本 <script type="text/javascript" src=&q ...

  2. ftp协议详解

    客户端与服务器之间,需要多条连接才能完成应用的协议,属于复杂协议.如FTP,PPTP,H.323和SIP均属于复杂协议. 这里主要介绍ftp协议的工作原理.首先,ftp通信协议有两种工作模式,被动模式 ...

  3. 虚拟机中Linux系统盘空间不足

    虚拟机中Linux系统盘在使用过程中, 出现空间不足的提示. 使用命令du --max-depth=1 -h 查看Home目录下各个文件占用空间, 发现是./cache(隐藏文件)占用很大空间.进入c ...

  4. asp.net调用客户端WebBrowser 进行网站地址截屏

    在asp.net网站中,如果要实现,在文本框中输入一个URL地址,就把该网页的页面整屏截下来,这段时间一直在研究这一块,在网上查了好多资料.自己又整合了一下. 其实也不是想象中的那么难.主要是通过调用 ...

  5. JZ2440开发板学习 1. 刚接触开发板， 安装驱动

    一. jtag和串口驱动 1. 驱动下载 http://pan.baidu.com/s/1pJkAHJH 2. 驱动安装 禁用win10的驱动数字签名 http://www.100ask.org/bb ...

  6. Javascript：谈谈JS的全局变量跟局部变量

    原文链接:http://blog.csdn.net/zyz511919766/article/details/7276089# 今天公司一个实习小妹子问我两段JS代码的区别: <script t ...

  7. ZooKeeper测试笔记

    1. 下载ZooKeeper.官网:http://zookeeper.apache.org 下载后解压,假定zookeeper程序目录为/home/test/zookeeper,为陈述方便此目录记为 ...

  8. jQuery 弹出层脚本

    直接贴代码: $.extend({ closeBox: function (o, x, fn) { $('#' + o).fadeOut(500, function () { if (fn & ...

  9. Linux之RHEL6的开机流程分析

    开机——很多人觉得很简单的事情,只要按下电源开关,然后系统就会自然启动,没有什么需要学习的.其实不然,如果系统没有什么问题,可以正常登陆的时候,当然开机很简单.但更多的时候,我们需要知道当机子不能正常 ...

  10. HHVM和Hack

    1. HHVM(http://hhvm.com)  全称是Hip Hop Virtual Machine,是一个PHP引擎. 2.Hack(http://hacklang.org) 一门新的服务器端语 ...