如何在用户滚动时不添加锚链接URL的情况下添加活动类 [英] How to add an active class as the user scrolls WITHOUT the anchor link URL

问题描述

我创建了一个导航工具，可以根据页面部分更改活动类，例如本示例教程: http://stanhub.com/tutorials/change-滚动式导航中的活动状态/

I've created a navigation tool that changes active class based on the page section like this example tutorial: http://stanhub.com/tutorials/change-active-state-in-sticky-navigation-on-scroll/

我的问题是:如何编辑此代码，以从浏览器URL中删除/阻止主题标签锚链接标题?

My question is: How do I edit this code to remove/prevent the hashtag anchor link title from showing up in the browser URL?

我当前的工作是:

$j(document).ready(function () {
    $j(document).on("scroll", onScroll);

    //smoothscroll
    $j('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $j(document).off("scroll");

        $j('a').each(function () {
            $j(this).removeClass('active');
        })
        $j(this).addClass('active');

        var target = this.hash,
            menu = target;
        $jtarget = $j(target);
        $j('html, body').stop().animate({
            'scrollTop': $jtarget.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $j(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $j(document).scrollTop();
    $j('#slide-nav a').each(function () {
        var currLink = $j(this);
        var refElement = $j(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $j('#slide-nav a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

推荐答案

类似的想法:

var t = null;
$j('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $j(document).off("scroll");

    $j('a').each(function () {
        $j(this).removeClass('active');
    })
    $j(this).addClass('active');
    t = $(this).attr('href');
    var target = t,
        menu = target;
    $jtarget = $j(target);
    $j('html, body').stop().animate({
        'scrollTop': $jtarget.offset().top+2
    }, 500, 'swing', function () {
        t = target;
        $j(document).on("scroll", onScroll);
    });
});
});

function onScroll(event){
var scrollPos = $j(document).scrollTop();
$j('#slide-nav a').each(function () {
    var currLink = $j(this);
    var refElement = $j(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $j('#slide-nav a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});
}

这篇关于如何在用户滚动时不添加锚链接URL的情况下添加活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！