$('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. 洛谷 P1005 动态规划 大数

    Problem Description 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n×m的矩阵,矩阵中的每个元素a(i,j)均为非负整数.游戏规则如下: 1 每次取数时须从每行各取走一个元素,共 ...

  2. C#中的Byte，String，Int，Hex之间的转换函数。

    /// <summary> Convert a string of hex digits (ex: E4 CA B2) to a byte array. </summary> ...

  3. Pycharm使用技巧：Split Vertically/Horizontally（垂直/水平拆分窗口）

    Split Vertically或者Split Horizontally可以把当前编辑窗口垂直或者水平拆分成两个. 使用: 在编辑窗口中打开你要展示的两个文件(如图中的  "郭靖" ...

  4. 页面上有tab,如何点击加载更多?

    加载更多是一个很简单的东西.但是也有几点需要注意: 1.首先在你切换tab的时候,要么在调用这个函数的时候将这个的thispage设为1,要么在切换tab的时候将这个thispage设为1,当你将这个 ...

  5. DDD应对运营活动系统腐化实践

    前言 任何人类的设计都会腐化,软件系统也不例外 腐化之谜 随着系统的规模增长和复杂度膨胀,系统会慢慢腐化. 于是改一个很简单的下单地址,就会牵动整个交易系统十几处的改动. 如何解决这种腐化之谜呢? 参 ...

  6. CentOS下载与服务器版安装(VMware)

    1. 下载 首先需要选择一个版本,因为华为云最新只提供了CentOS 7.6,所以要选择CentOS 7版本的. 官网只提供了最新的版本,而且服务器在国外,下载速度贼慢. 不过官方提供了分布在各个地区 ...

  7. Oracle Trace文件生成及查看

    2011-11-03 16:45:01 聪明的笨蛋 阅读数 39596更多 分类专栏: 6) Database   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...

  8. Sequence contains no elements

    这个错误,在使用List<T>的First函数遇到. Sequence contains no elements? From "Fixing LINQ Error: Sequen ...

  9. RTSP、RTMP、HTTP协议

    一.异同1.RSTP.RTMP.HTTP协议共同点RTSP RTMP HTTP都是用在应用层.理论上这三种协议都可以做直播和点播,但直播一般用RTSP和RTMP点播用HTTP.2.RSTP.RTMP. ...

  10. linux下的/dev/shm/及对Oracle 的影响

    一./dev/shm/介绍: /dev/shm/是linux下一个非常有用的目录,因为这个目录不在硬盘上,而是在内存里.因此在linux下,就不需要大费周折去建ramdisk,直接使用/dev/shm ...