零星网络

技术&资讯
网站超市

需要前后台演示请留言,或QQ:150623477联系站长。

本成品是基于ASP+Access开发的网站内容管理系统,提供了简介类模块,新闻类模块,产品类模块,图片类模块,下载类模块
· 适用性:充分考虑公司企业的实际需要,确保功能上较强的实用性。
· 易用性:用户界面简洁、美观、友好,易于用户操作和使用,操作人员只需简单学习即可掌握。
· 安全性:安全可靠的权限划分,既考虑信息的共享,又注意信息的保护与隔离。

JQUERY 您的当前位置:首页 > 技术&资讯 > JQUERY

jQuery制作的页内锚点平滑跳转

发布时间:2019-09-08  浏览次数:  分享到:

很久前看一欧美网站居然是个横版的,很宽很雷人,但使用了锚点平滑跳转效果使得整个浏览体验也是很愉快的。通常国内很多大网站页面都是纵向的,很高很累人,因此也会用锚点平滑效果减轻浏览负担。综上所述,那就干脆搞个更雷人的效果,支持横版和纵版的锚点平滑跳转效果吧
看着很强大的样子哦,其实是声大点小。哪是为什么呢?因为用了jquery,代码就自然很简单咯。
先看如何调用:
$(document).ready(function(){
    $(".goTop").anchorGoWhere({target:1});
    $(".goDown").anchorGoWhere({target:1});
    $(".goNext").anchorGoWhere({target:1});
    $(".goFront").anchorGoWhere({target:1});
    $(".goVertical").anchorGoWhere({target:2});
});
$("...")部分表示通过样式名获得该类的a标签,该样式名没有具体的样式定义(也可以根据实际需要定义),只为为了便于查找同类标签而已。anchorGoWhere就是锚点跳转的实现方法,里面的target参数为跳转的类型,如果是1,则是纵向的;如果是2,则是横向的。
锚点起点部分:
a href="#menu1" class="goDown">菜单一
锚点目的地:
id="menu1">菜单一的内容
由“锚点起点”和“锚点目的地”代码可以看到,一切代码都是很常规的页内锚点设置。我们没有因为扩张平滑效果而强加一些多余的配置代码,同时当页面js失效后,这些锚点还是可以按默认的方式跳转。这或多或少还是符合了预留退路的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;
        });                  
    });
};
是不是很简单啊?其实类似这种锚点平滑跳转的代码,网上一搜就有很多。但要用得顺手还是自己根据实际需要写的方便,何况这个也不难。这个Demo在firefox3、Opera9、IE6/7/8、safari4下测试通过,经朋友测试chrome不行,但我一时也没看出个究竟。如果哪位朋友知道原因,麻烦告诉我。

相关评论

    评论加载中...
    评论者:     验证码:
        

首页|网站超市|业界|营销|优化|HTML|JS|JQUERY|DIV+CSS|编程|运营|设计排版|创业|访谈

Copyright © 2006-2015 Power by 零星设计. 联系QQ:150623477
合作共赢、快速高效、优质的网站建设提供商

  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • 业务电话正在通话中…
  • 09:00AM-22:00PM
  • 高效优质的网站建设提供商
  • 加入收藏