平滑滚动到名称和ID

Question

I have this code to scroll smoothly to a div id, but not to a name:

$('.scroll').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top - 70
    }, 800, function(){
        window.location.hash = "#";
        return false;
    });
});

and this one does the opposite:

$('.scroll').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - 70
    }, 800, function(){
        window.location.hash = "#";
        return false;
    });
});

How can I mix both codes to scroll to ID's and names in one code?

Answer 1

Join the selectors. This way jQuery will use the first that it finds:

        scrollTop: $($.attr(this, 'href') + ',[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - 70

Answer 2

Just in case someone need it:

$(function() {
    $('.scroll').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href') + ',[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - 70
        }, 800, function(){
            window.location.hash = ="#";
            return false;
        });
    });
});

Answer 3

Is there a way to do this with vanilla javascript?

The best solution I have found for doing this in vanilla javascript is to import the package https://github.com/cferdinandi/smooth-scroll

Answer 4

I'm not sure if I understand your question 100% but I think you could just search for the element by name using querySelector and then apply the scroll to your element that way.

I was looking for an easy scroll solution earlier and came across scrollIntoView . Worked like a charm and required a lot less code than any of the other solutions I found.

 var foo = document.querySelector('[name="foo"]'); var bar = document.querySelector('#bar'); foo.addEventListener('click', function(){ bar.scrollIntoView({behavior: 'smooth', block: 'start'}); }); 

 .top { width: 100%; height: 150vh; background-color: blue; text-align: center } button { margin-top: 2rem; padding: 5px 15px; font-size 18px; } .second { display: flex; justify-content: center; width: 100%; height: 100vh; background-color: green; } h1 { color: white; } 

 <div class="top"> <button name="foo">Click Here</button> </div> <div class="second" id="bar"> <h1>It's Working!</h1> </div>