javascriptjqueryhtmlpage-jump

getElementByTagName(a) for autoscroll


What I have now is:

var a = document.getElementsByTagName('a');

I use this to get all elements with an 'a' and when I scroll it autoscrolls to the next 'a' element.

The problem with that is that I also use links (that use an a href="") so sometimes it scrolls to a link instead of an <a name="name"></a>. Is their anyway to fix this? Like:

var a = document.getElementsByTagName('a name=""');

(this one doesnt work)

If full code is needed I will add it below, but its probably not needed.

(function () {
    var delay = false;

    $(document).on('mousewheel DOMMouseScroll', function (event) {
        event.preventDefault();
        if (delay) return;

        delay = true;
        setTimeout(function () {
            delay = false
        }, 800);

        var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

        var a = document.getElementsByTagName('a');
        if (wd < 0) {
            for (var i = 0; i < a.length; i++) {
                var t = a[i].getClientRects()[0].top;
                if (t >= window.innerHeight * 0.95) break;
            }
        }
        else {
            for (var i = a.length - 1; i >= 0; i--) {
                var t = a[i].getClientRects()[0].top;
                if (t < -window.innerHeight * 0.5) break;
            }
        }
        $('html,body').animate({
            scrollTop: a[i].offsetTop
        }, 800);
    });
})();

Solution

  • You can use QuerySelector for HTML 5 supporting browsers .You can check its support from http://caniuse.com/#feat=queryselector

    QuerySelectorAll

    document.querySelectorAll("a[name='<setname>']");
    

    For older browsers use Jquery

    $("a[name='<setname>']")
    

    If you don't want to set a specific name just leave it blank. The selector is same for both JQuery and HTML 5 querySelector

    document.querySelectorAll("a[name]");
    

    or

    $("a[name]")