JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<a href="#link1">link 1</a>
<a href="#link2">link 2</a>
<a href="#link3">link 3</a>
<a href="#link4">link 4</a>
<a href="#link5">link 5</a>

<h1 name="link1">Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui animi, tenetur distinctio a fugiat aut harum non quis cupiditate laudantium recusandae itaque error corporis eveniet eligendi quibusdam dolorum, facere facilis iste neque. Hic nisi suscipit ipsa ratione, ipsum iure voluptatibus!</p>
<p>Aliquid repudiandae dolorum odio eaque explicabo ad aspernatur sint natus et hic cum obcaecati, quaerat minima provident nihil inventore error nesciunt laudantium iusto excepturi eum. Voluptatum harum voluptatem debitis quaerat minus ipsum, minima, nesciunt quod officiis ut, quas vitae! Repudiandae.</p>
<p>Repellat iure laborum, voluptates atque distinctio quasi sequi eveniet cum odit tempore optio temporibus officia nobis minus rerum, assumenda at sapiente reiciendis, fuga. Alias quod accusamus obcaecati aliquid veritatis, aut. Sed unde ea rerum similique, aut laboriosam iusto quis incidunt.</p>
<p>Maxime provident consequatur debitis repellat, illum quis eaque voluptatibus officia tempora pariatur doloremque ipsam molestiae labore ipsum. Quo laborum placeat, eaque minus laudantium voluptates excepturi vero aspernatur, sit sunt perspiciatis necessitatibus dolores harum, sint quaerat alias adipisci soluta nostrum veniam!</p>
<p>Adipisci possimus repudiandae dolores quaerat nemo odit sunt voluptas dolore odio porro fuga magni nostrum repellat, eum? Ullam, optio, reprehenderit. Velit doloremque nam veritatis, ea, a, molestiae aspernatur sed explicabo, illo vero cumque accusantium unde excepturi ducimus alias. Quisquam, delectus!</p>
<p>Odio dignissimos libero amet ut. Nesciunt laborum fuga eum at beatae labore autem cum quae, ex, ea ab dolorum nihil, maxime id in omnis soluta expedita! Ea nesciunt facere hic quisquam officia porro placeat praesentium, similique. Eveniet culpa quidem at.</p>
<p>Ab...

JavaScript

// Plugin
$.fn.scrollToAnchors = function(attrName) {
	if (attrName === undefined) {
  	attrName = 'href';
  }
	this.click(function(evt) {
  	evt.preventDefault();
    var target = $('[name="' + $(this).attr(attrName).replace('#', '') + '"]');
    $('html, body').animate({scrollTop: target.offset().top});
    return false;
  });
};

// What would show up in the site's JS
$(function() {
	$('a').scrollToAnchors();
});