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. 搭建基于Jenkins salt-api的运维工具

    1. 安装salt-master和salt-minion 安装过程不再赘述,请参考http://docs.saltstack.com/en/latest/topics/installation/ind ...

  2. “You couldn’t see my tears cause I am in the water.“ Fish said to water.“But I could feel your tears cause you are in my heart..“ Answered water.

    “You couldn’t see my tears cause I am in the water.“ Fish said to water.“But I could feel your tears ...

  3. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. 获取tomcat下路径

    import java.io.File; public class MainTest { public static void main(String[] args) { //获取是项目的绝对路径 S ...

  5. 网易测试分享会——“一起打造你想要的QA团队”

    昨天(2016.11.30)参加了网易资深测试专家王晓明的测试分享会——“一起打造你想要的QA团队”,以下为笔者做的归纳总结. 重点 1.让测试更加容易做好.不容易测试的代码,不具有健壮性. 2.Ke ...

  6. 连接MySQL错误:Can't connect to MySQL server (10060)

    问题原因: 导致些问题可能有以下几个原因: 1.网络不通: 2.服务未启动: 3.防火墙端口未开放: ----防火墙端口未开放的可能性比较大

  7. Apache配置文件讲解

        持续作用扩展自 HTTP/1.0 和 HTTP/1.1 的长连接特性.提供了长效的 HTTP 会话,用以在同 一个 TCP 连接中进行多次请求. 在某些情况下, 这样的方式会对包含大量图片的 ...

  8. Java生成带小图标的二维码-google zxing 工具类

    近期一直忙于开发微信商城项目,应客户要求,要开发个有图标的二维码.经过两次改版,终于实现了该功能(第一次没有小图标,这次才整合好的),如下是完整代码 . 该代码使用Java7开发,另外使用 core- ...

  9. TFS二次开发系列：六、TFS的版本控制

    在TFS中对于版本控制是在WorkSpace工作区来控制的. 首先我们先整理WorkSpace的一些基本使用方法. CheckIn:迁入挂起的操作 CreateMapping:创建一个本地映射地址 D ...

  10. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...