Example: Smooth Highlight of menu options

Description

"Skip To Content" button is visible on load and scrolling to content is enabled using the smooth value

Configuration Attribute

data-skipto="highlightTarget: smooth"

Note: The data-skipto attribute is on the script element referencing the SkipTo.js script.

Cabbage

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tincidunt consequat purus vitae sagittis. Nam ut elementum libero. In dui lacus, interdum ac imperdiet sed, volutpat in diam. Morbi scelerisque arcu eros, et ultrices massa elementum id. Morbi dui libero, mollis vel lacinia non, ultricies sit amet neque. Etiam condimentum blandit pharetra. Link 1

More on Cabbage

Etiam vitae urna ligula. In accumsan volutpat sapien, eget varius enim commodo at. Nam faucibus, augue id maximus semper, sapien quam egestas est, euismod blandit neque mi ut massa. Donec vitae sagittis velit, ac suscipit magna. Mauris tincidunt nunc nec purus convallis, in commodo erat efficitur. Integer pretium semper imperdiet. Sed sed facilisis diam. Integer pellentesque elit leo, sed interdum quam sollicitudin at. Aliquam a aliquam mi. Link 2

Carrots

Morbi non nunc non justo sollicitudin auctor et at urna. Curabitur luctus sodales quam rutrum auctor. Nullam euismod ipsum vel ipsum mattis, a hendrerit felis pretium. Proin pharetra in tortor ut molestie. Nam in ligula ac enim fringilla rhoncus ac vel lectus. Nam eu dui bibendum, sollicitudin libero quis, consectetur diam. Fusce euismod ultricies nibh, blandit consequat tortor. Cras at est at mi vestibulum rutrum. Sed luctus est eu nisi ultricies, vitae consectetur tortor pulvinar. Link 3

Cellery

Nullam sollicitudin semper tortor, quis condimentum turpis egestas eget. Donec condimentum euismod dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque maximus semper venenatis. Nullam at risus tempor, congue mi eu, aliquet massa. Vestibulum faucibus, augue sit amet imperdiet scelerisque, orci ante vulputate turpis, non sodales sapien nisi quis libero. In feugiat vehicula ligula, a vestibulum urna lacinia tincidunt. Duis ut malesuada massa, vitae sagittis ipsum. Nunc quis consectetur arcu. Vestibulum at tellus venenatis velit tincidunt consequat et non nulla. Suspendisse pretium lobortis metus ut maximus. Link 4

Lettuce

Cras consequat, quam sodales commodo blandit, magna lacus sodales odio, vitae dignissim mi tortor id est. Suspendisse arcu tellus, ornare iaculis nisl vel, egestas imperdiet leo. Pellentesque hendrerit metus neque, id interdum lectus tincidunt sed. Vestibulum odio nibh, bibendum id leo non, mattis rhoncus est. Donec ac massa at risus ultricies consectetur fringilla eu est. Fusce nec purus imperdiet, vehicula ex ut, volutpat ante. Morbi porttitor lorem id dolor pretium suscipit. Link 5

More on Lettuce

Curabitur eros lacus, pulvinar a finibus in, fermentum eu tortor. Praesent scelerisque risus sit amet ultricies feugiat. Donec a nibh et eros consectetur ornare id sed mauris. Etiam efficitur sapien quis nibh congue feugiat sed in nulla. Nam bibendum, massa vitae hendrerit sollicitudin, quam libero condimentum tortor, aliquam faucibus tellus turpis posuere ante. Etiam pharetra aliquam enim non finibus. Link 6

Kale

Etiam varius turpis et ex varius congue. Aenean et pretium sem. Ut pulvinar ligula et libero ultrices auctor. Vestibulum consequat mollis magna vitae rutrum. Phasellus blandit accumsan vestibulum. Etiam id egestas dui, a pharetra urna. Curabitur vitae porta elit, ac imperdiet massa. Nullam in lacinia sapien, venenatis maximus ante. Ut varius arcu eget tempor ultricies. Link 7

More on Kale (h3)

Proin aliquam, diam et tincidunt rhoncus, neque ex placerat ligula, eu tristique turpis nibh non nisl. Nam risus sem, commodo eget mollis vitae, vestibulum ut leo. Proin at elementum sem. Donec fringilla risus arcu, in dignissim tortor efficitur sed. Quisque gravida, nibh non tincidunt euismod, felis ligula sodales sapien, in consectetur metus tortor dignissim velit. Link 8A

More on Kale (h4)

Proin aliquam, diam et tincidunt rhoncus, neque ex placerat ligula, eu tristique turpis nibh non nisl. Nam risus sem, commodo eget mollis vitae, vestibulum ut leo. Proin at elementum sem. Donec fringilla risus arcu, in dignissim tortor efficitur sed. Quisque gravida, nibh non tincidunt euismod, felis ligula sodales sapien, in consectetur metus tortor dignissim velit. Link 8B
More on Kale (h5)
Proin aliquam, diam et tincidunt rhoncus, neque ex placerat ligula, eu tristique turpis nibh non nisl. Nam risus sem, commodo eget mollis vitae, vestibulum ut leo. Proin at elementum sem. Donec fringilla risus arcu, in dignissim tortor efficitur sed. Quisque gravida, nibh non tincidunt euismod, felis ligula sodales sapien, in consectetur metus tortor dignissim velit. Link 8C
More on Kale (h6)
Proin aliquam, diam et tincidunt rhoncus, neque ex placerat ligula, eu tristique turpis nibh non nisl. Nam risus sem, commodo eget mollis vitae, vestibulum ut leo. Proin at elementum sem. Donec fringilla risus arcu, in dignissim tortor efficitur sed. Quisque gravida, nibh non tincidunt euismod, felis ligula sodales sapien, in consectetur metus tortor dignissim velit. Link 8D

Spinach

Vestibulum sapien lectus, pretium eget tortor vel, venenatis iaculis ex. Nullam arcu arcu, hendrerit vitae mattis sed, malesuada sed metus. In aliquet iaculis erat, tempus convallis lacus posuere quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum rutrum maximus libero, eget gravida nisi consequat vitae. Ut vulputate mollis elementum. Link 9