jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)

JQuery下锚点的平滑跳转

对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用。

例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下:

$(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)

其中animate为JQuery的自定义动画方法,$(“#box”).offset().top表示id为box的JQuery对象距离页面顶部的偏移值,1000表示平滑动画执行的时间为1000毫秒,也就是1秒。

  // 页面内向导
            $(".brief p").click(function (e) {
                $(this).addClass("active_p").siblings().removeClass("active_p");
                var v_id = e.target.id;
                if (v_id === 'se_advantage') {
                    $("html, body").animate({ scrollTop: $(".advantage").offset().top }, 1000)
                } else if (v_id === 'flow') {
                    $("html, body").animate({ scrollTop: $(".procedure").offset().top }, 1000)
                } else {
                    $("html, body").animate({ scrollTop: $(".objective").offset().top }, 1000)
                }
            });

var v_id = e.target.id; 是获取被点击元素的id

转载于:https://www.cnblogs.com/mica/p/11162496.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值