jQuery 控制網頁捲軸移動 & Ignore link '#' method jump action

$('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

最新文章

热门文章