How to implement a smooth transition for the anchor link?

there is a menu

<ul class="menu-order">
the <li>
 <a href="#1">1</a>
</li>
the <li>
 <a href="#2">2</a>
</li>
the <li>
 <a href="#3">3</a>
</li>
the <li>
 <a href="#4">4</a>
</li>
 </ul>


and the blocks with the corresponding id. How to implement a smooth transition to the anchor?
June 8th 19 at 16:28
3 answers
June 8th 19 at 16:30
$(document).on('click', '.menu-order li a', function() {
 var linkID = $(this).attr('href');
 $('html, body').animate({ 
 scrollTop: $(linkID).offset().top 
 }, 'slow');
});
Is it possible to make the script universal? Ie to make it work for any armature, not just that which is in this menu - nikita.Stracke commented on June 8th 19 at 16:33
I wrote just such an option.
LinkID variable will be assigned the value of the href attribute of the link, which is clicked (see description of functions). And then it will be sallite to the tag, which will have id = href - citlalli65 commented on June 8th 19 at 16:36
June 8th 19 at 16:32
$(".menu-order li a").click(function() {
 $("html, body").animate({
 scrollTop: $($(this).attr("href")).offset().top + "px"
 }, {
 duration: 750,
 easing: "swing"
});
 return false;
 });
June 8th 19 at 16:34
Here is a link to codepen for the native, at a function for all occasions

Find more questions by tags JavaScript