jQuery頁內錨點平滑跳轉

時間 2019-11-15

標籤 jquery 平滑欄目 JQuery 简体版

原文原文鏈接

html

$(document).ready(function(){
    $(".goTop").anchorGoWhere({target:1});
    $(".goDown").anchorGoWhere({target:1});
    $(".goNext").anchorGoWhere({target:1});
    $(".goFront").anchorGoWhere({target:1});
    $(".goVertical").anchorGoWhere({target:2});
});


<!-- lang: html -->
<a href="#menu1" class="goDown">goDown</a>
<a href="#menu2" class="goNext">goNext</a>
<a href="#menu1" class="goFront">goFront</a>
<a href="#right" class="goVertical">goVertical</a>
<a href="#body"  class="goTop">goTop</a></span>


<!-- lang: html -->
<legend id="menu1">菜單一的內容</legend>
<body id="body">


<!-- lang: js -->
jQuery.fn.anchorGoWhere = function(options){
    var obj = jQuery(this);
    var defaults = {target:0, timer:1000};
    var o = jQuery.extend(defaults,options);
    obj.each(function(i){
        jQuery(obj[i]).click(function(){
            var _rel = jQuery(this).attr("href").substr(1);
            switch(o.target){
                case 1: 
                    var _targetTop = jQuery("#"+_rel).offset().top;
                    jQuery("html,body").animate({scrollTop:_targetTop},o.timer);
                    break;
                case 2:
                    var _targetLeft = jQuery("#"+_rel).offset().left;
                    jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer);
                    break;
            }
            return false;
        });                  
    });
};

相關標籤/搜索