$('a.gotoheader').click(function(){

    // 讓捲軸移動到 0 的位置

    $('html, body').scrollTop();

    // ignore link "#" method

    return false;

});
//在scroll時加入動畫效果

$('a.gotoheader').click(function(){

    // 修正 Opera 問題

    var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

    $body.animate({

        scrollTop:

    }, );

    return false;

});
//scroll到頁面指定的位置，最後再加上easeOutBounce 的動畫效果

$('a.gotoheader').click(function(){

    // 修正 Opera 問題

    var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

    $body.animate({

        scrollTop: $('#header').offset().top

    }, , 'easeOutBounce');

    return false;

});

想要ignore link "#" method, 當click一個link時，page不要跳轉，可使用

<a href="javascript:void(0);">Example</a>

來代替

<a href="#">Example</a>

也可以使用上面例子中提到在，onclick事件觸發後的function中 return false;

另外一種方法就是使用 event.preventDefault(); 取消事件的預設行為

<!DOCTYPE html>

<html>

<head>

<title>preventDefault example</title>

</head>

<body>

    <p>Please click on the checkbox control.</p>

    <form>

        <label for="id-checkbox">Checkbox</label>

        <input type="checkbox" id="id-checkbox"/>

    </form>

    <script>

        document.querySelector("#id-checkbox").addEventListener("click", function(event){

            alert("preventDefault will stop you from checking this checkbox!")

            event.preventDefault();

        }, false);

    </script>

</body>

</html>

jQuery 控制網頁捲軸移動 & Ignore link '#' method jump action的更多相关文章

  1. 邁向 RHCE 之路 (Day26) - Apache 網頁伺服器

    本篇將在 SELinux 安全機制及 IPTables 防火牆開啟的環境下實作,分別實作簡單網頁服務及虛擬主機 Virtual Host 設定,最後則是實作網頁中需要保護網頁時可以透過 .htacce ...

  2. eafier 簡單易用 HTML、CSS 網頁編輯器（可自動插入 Tag 標籤）

    很久很久以前,一般人要做網頁的話大概都會用 FrontPage 之類的工具,更進階一點的會用 Dreamweaver 等軟體.雖然上述軟體提供很方便的「所見即所得」的編輯預覽模式,但寫出來的網頁程式碼 ...

  3. 問題排查：行動裝置網頁前端 UI 設計 (1)

    這是最近開始接手的一個微信公眾平台專案, 在重整後端程式碼時,因為也需要透過前端來看效果, 所以就因此在前端的部分遇到了不少問題, 畢竟這是以前沒接觸過的領域 (早年的網頁應用程式開發沒有那麼多分工) ...

  4. jQueryMobile 網頁使用 ASP.NET Web API 服務

    微軟的 ASP.NET Web API 框架,能以 RESTful 輕量級的架構風格,建立 HTTP 服務,讓多種不同的用戶端,如: 手機.平板.電腦(PC),透過 HTTP 的 GET.POST.P ...

  5. [转载]在網頁上加入HTML5 的Video Tag，直接播放MP4、OGG…等

    在之前有一篇文章提到HTML5(為何iPhone,iPod,iPad不支援Flash,HTML5將更普及於網路世界!!)的重要性,而Html 5的主要革新是在他的語意標籤,像是<video> ...

  6. 歐洲國家拓展其移動和IT服務業務

    中興德國子公司與JOIN簽訂了一項綜合託管服務合同,在該合同中,公司將全面負責為盧森堡和比利時的JOIN核心網路提供網路運營,點對點無線網路報告,新品發佈和維護,還負責故障檢查.維修.測試和軟體升級. ...

  7. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  8. jQuery 控制表单和表格

    这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践. <!DOCTYPE html PUBLIC &q ...

  9. PHP微信登錄（網頁授權）之後的獲取用戶的信息

    //這部峯代碼是封裝的庫文件,<?php /** * Created by PhpStorm. * User: root * Date: 16-6-23 * Time: 下午3:29 */ cl ...

随机推荐

  1. php流程控制 之循环语句的使用

    循环语句的使用 王同学需要反复往返于北京和大连,就是典型的循环结构.假设王思总投资这个项目需要往返大连100次,每次往返都王同学都会计数一次.难道我们写一百遍同样的代码?显然对于智商极高的程序员来说不 ...

  2. .Net Core WebApi实现跨域

    .Net Core 需要引用一个包  Microsoft.AspNetCore.Cors 让接口实现跨域,需要配置两个地方. 一.Startup.cs 这里需要配置两个地方 public void C ...

  3. webuploader+Java如何实现分片+断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  4. [mysql8]新坑哈 更改Mysql 表的大小转换设置lower_case_table_names=1

    在安装了8.0.14之后,初始化的时候在my.cnf里设置了lower_case_table_names=1,安装好了之后,启动报错: 1 2 3 4 5 2019-01-28T13:24:24.91 ...

  5. Pytest权威教程01-安装及入门

    目录 安装及入门 安装 Pytest 创建你的第一个测试用例 执行多条测试用例 断言抛出了指定异常 使用类组织多条测试用例 函数测试中请求使用独立的临时目录 进一步阅读 返回: Pytest权威教程 ...

  6. 部署Django到云服务器（centos+nginx+mysql+uwsgi+python3）【操作篇（1）】

    开篇 笛卡尔说:"你不能教会一个人任何东西,你只能帮助他发现他自己内心本来就有的东西!" jacky能教你的,只能是经验和建议,要逆袭还得通过自己对数据的不断领悟,数据领域的技能都 ...

  7. 区块链阶段1-Linux基础- 2 Linux文件系统

    2.1 什么是文件系统 文件系统是操作系统在磁盘或分区上组织文件的方法和数据结构.负责对磁盘空间进行组织和分配,存储文件数据,并对其提供保护和检索服务.学习Linux,首先需要了解整个 Linux 文 ...

  8. Python 之pyinstaller模块打包成exe文件

    一.安装pyinstaller pip install pyinstaller 二.下载安装pyinstaler运行时所需要的windows扩展pywin32 https://github.com/m ...

  9. 讨论关于RAID以及RAID对于存储的影响

    定义及作用 RAID是Redundent Array of Inexpensive Disks的缩写,直译为“廉价冗余磁盘阵列”,也简称为“磁盘阵列”.后来RAID中的字母I被改作了Independe ...

  10. jQuery学习笔记——事件

    何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...