jQuery 实现页面内锚链接平滑滚动

发布于 2017-11-02 00:42:11 字数 1960 浏览 2690 评论 0

有一些网页页面很长，特别是就一个单页面的网站，如果挨着一个一个的内容看下去，很累也很费时，用户体验当然也不好，因此可以用锚点平滑效果减轻浏览负担，有更高的用户体验，还能提高整个网页的逼格，当然你也可以使用更加炫酷的全屏滚动插件。

jQuery 代码

主要就是调用插件的代码，在网页加载完成以后才能点击，防止用户点击过快，而网页没有加载完毕。

$(function(){
    $(".goTop").anchorGoWhere({target:1});
}

HTML 代码

我们点击的链接或者是按钮，一般像是返回顶部、左侧右侧的快速导航等。

<a href="#body" class="goTop">返回顶部</a></span>

锚链接的目的地

链接的目的地，添加一个唯一的ID，即使插件运行出错或者无法支持运行，也不会影响网页的功能。

<body id="body">

插件内容

你可以将下面的插件保存为一个独立的文件，在页面调用即可，这样可以在客户端缓存起来，节省很多带宽和流量。

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;
         });                  
     });
 };

其实类似这种锚点平滑跳转的代码，网上一搜就有很多。但要用得顺手还是自己根据实际需要写的方便，何况这个也不难。

分享到QQ

分享到微博