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. 用python在linux下获取网卡地址

    使用一个第三方库,名为psutil 代码如下: #!/usr/bin/python # -*- coding:utf-8 -*- import psutil def get_netcard(): ne ...

  2. FTP连接时出现“227 Entering Passive Mode” 的解决方法

    今天从公网的服务器连接本地内网的FTP server copy文件时,系统老是提示227 Entering Passive Mode (xxx,xxx,,xxx,xxx,x),很是奇怪,于是上网找资料 ...

  3. 《编写可维护的JavaScript》——JavaScript编码规范(二)

    昨天是我偶像生日,现在整个人都还好兴奋啊O(∩_∩)O~  闲话少说,让我先发篇随笔留念一下^_^ ////////////////////////////////正文分割线///////////// ...

  4. 三分钟学会funsioncharts

    由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...

  5. android应用刷新系统多媒体库(增加or删除多媒体文件)

    系统:android4.4及其以上 功能:app中拍照, 并实现浏览.删除照片操作. 实现: 1.拍照,存储到指定路径path 2.通知系统多媒体数据库刷新数据. 主要使用MediaScannerCo ...

  6. JavaScript 中 map、foreach、reduce 间的区别

    一直对map.foreach.reduce这些函数很是生疏,今天看underscorejs时好好研究了一下,一研究我就更懵了,这不是一样嘛,都是遍历,所以我就去知乎找了一下,整理出了比较好的几个说法. ...

  7. 移动端接口:java写get方式访问数据(springmvc+spring。。。)

    很多时候,一个问题想明白,找对点了再去问,这样被问的人也知道怎么给你讲,你也听的明白. 就比如做移动端接口,上去就问 怎么弄接口呀,其实是没找到主要的点上,所以不知道怎么弄,那个点就是手机接口是干嘛的 ...

  8. HTML空格标签

    双学位论文+本学位开题报告+实训项目+实训考试+学员考试,真是脑子都要爆炸... 话不多说,留个小知识点,HTML的空格替代符号表示法: 1. 半个空白,1个字符宽度:  或者   2.1个空白,2个 ...

  9. JS跨域

    //2011-7-25 (function(){ //闭包 function load_script(xyUrl, callback){ var head = document.getElements ...

  10. sublime text3 C语言环境配置

    { "cmd": ["gcc", "-W", "-Wall", "-Werror","${ ...