let sentence = $('.sentence').text(); sentences = sentence.split('.') $('.sentence').html(''); for (let s of sentences) { $('.sentence').append('<span>' + s + '.</span>') } $('.sentence span').on('click', function() { $(this).addClass('highlight').siblings().removeClass('highlight'); });

 .sentence span:hover, .highlight { background: Yellow; } window.smoothScroll = function (target) { var scrollContainer = target; do { //find scroll container scrollContainer = scrollContainer.parentNode; if (!scrollContainer) return; scrollContainer.scrollTop += 1; } while (scrollContainer.scrollTop == 0); var targetY = 0; do { //find the top of target relatively to the container if (target == scrollContainer) break; targetY += target.offsetTop; } while (target = target.offsetParent); scroll = function (c, a, b, i) { i++; if (i > 30) return; c.scrollTop = a + (b - a) / 30 * i; setTimeout(function () { scroll(c, a, b, i); }, 20); } // start scrolling scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="sentence"> (1)Lorem ipsum dolor sit amet consectetur adipiscing elit. (2)Pellentesque iaculis. (3)Pellentesque iaculis nisl at erat dapibus cursus. (4)Pellentesque iaculis. (5)amet consectetur adipiscing elit. (6)adipiscing elit. </p>