jquery解决a标签锚点跳转改变url

问题描述:a标签使用页内锚点跳转时,会修改url,但有时候我们不希望点击这个a标签时url也发生变化

解决思路:点击a标签触发onclick函数,先在页面中滚动到锚点位置,然后返回false,由于onclick返回false,故a标签href不执行

//点击目录a标签滚动到对应指向位置
$('a').on("click", function() {
    let headerH = 80;//导航栏高度,滚动偏移量
    let nowActive = $.attr(this, 'href').substr(1, $.attr(this, 'href').length);//获取当前a标签href除#外的字符
    $('html, body').animate({
        scrollTop: $("#" + nowActive).offset().top - headerH
    }, 400);
    return false;//返回false,不修改url,返回true修改url
});
作者:WuQiling
文章链接:https://www.wqlblog.cn/jquery解决a标签锚点跳转改变url/
文章采用 CC BY-NC-SA 4.0 协议进行许可,转载请遵循协议
暂无评论

发送评论 编辑评论


				
默认
贴吧
上一篇
下一篇