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

发布于 2017-11-02 字数 2328 浏览 1470 评论 0

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

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

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

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

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!