Dynamic jQuery Jump To Section

Developer
Robby Klein
Size
5,780 Kb
Views
40,480
  1. Dynamic jQuery Jump To Section Previews
  2. Dynamic jQuery Jump To Section HTML Codes
  3. Dynamic jQuery Jump To Section CSS Codes
  4. Dynamic jQuery Jump To Section JS Codes

How do I make an dynamic jquery jump to section?

Here's a jQuery jump to section box that pulls from the articles heading. Great for blogs!. What is a dynamic jquery jump to section? How do you make a dynamic jquery jump to section? This script and codes were developed by Robby Klein on 07 July 2022, Thursday.

Dynamic jQuery Jump To Section Previews
IQ Test

Dynamic jQuery Jump To Section - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic jQuery Jump To Section</title> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Roboto:900|Roboto+Slab:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
If you found this pen helpful you should checkout my web design and development blog:
http://sitechop.com
This pen is a demo from:
http://sitechop.com/front-end-dev/dynamic-jquery-jump-to-section-box
-->
<div class="widthWrapper"> <article class="postColumn"> <h1>Dynamic jQuery Jump To Section</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque facilisis faucibus. Etiam vel ornare odio. Vestibulum tempor leo et ipsum lobortis suscipit. Nunc volutpat tincidunt rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In gravida, purus at bibendum ultrices, ante eros imperdiet urna, vel porttitor tellus ante maximus orci. Cras eu lacus accumsan, tincidunt nisi nec, gravida lacus. Fusce eget erat eget nisi posuere euismod sed nec urna. Nullam rhoncus sem ut mollis pellentesque. Maecenas a vehicula elit, a tincidunt elit. Quisque rutrum mi vel erat tincidunt, eu tempus sem posuere. Phasellus congue ultrices est eu elementum.</p> <p>Sed tempus pharetra semper. Donec molestie, sem sed euismod varius, dolor urna posuere turpis, sed posuere leo dui id turpis. Quisque viverra luctus auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer in est arcu. Vivamus euismod felis vitae diam tincidunt, nec ultricies nulla venenatis. Fusce scelerisque felis at massa ornare, eu ornare est interdum. Aenean scelerisque lacinia nisl, vitae eleifend dolor posuere at. Ut nec pretium urna, eu feugiat elit.</p> <h2>An article sub heading!</h2> <p>Donec dapibus ut sapien a cursus. Sed nec nisl leo. Nunc congue risus quis varius efficitur. In maximus tellus at quam feugiat porttitor. Curabitur vitae nunc aliquam, fringilla justo efficitur, rutrum elit. Cras consequat semper nunc, eget molestie magna. Etiam imperdiet tortor vitae sapien imperdiet, eget semper magna porta. Nullam tortor metus, sodales et condimentum nec, placerat sed ligula. Aenean ultrices lacus sit amet lacinia pretium. Praesent luctus magna a arcu ultricies feugiat. Phasellus volutpat iaculis tortor. Fusce a tortor nunc. Nullam arcu metus, posuere eget lectus in, auctor suscipit elit. Sed ex tortor, eleifend ut faucibus vitae, fringilla ac sapien. Morbi vel luctus ligula. Morbi ut libero accumsan, venenatis massa ac, hendrerit diam.</p> <ul> <li>Awesome list-item</li> <li>Here's another list item</li> <li>Woah, 3 list list items?</li> <li>Might as well add one more</li> </ul> <p>Aliquam tempus sed mi vel porta. Nam eleifend pharetra ligula, vitae feugiat est dignissim nec. Nunc odio turpis, dignissim sit amet fermentum vel, vehicula ut velit. Nam sodales sapien vel condimentum pharetra. In sit amet finibus metus. Nam quis tortor a velit bibendum efficitur. Etiam dapibus, ex ac laoreet tristique, magna velit sollicitudin elit, ac pellentesque nisl dui eget purus. Maecenas vehicula fermentum ante, vitae fringilla sapien vulputate in. Nulla id nisi non neque rutrum dignissim. Fusce finibus dui nec turpis tristique, ac feugiat dolor tempus. Morbi commodo auctor eros non consectetur. Maecenas vitae posuere enim. Aenean ligula risus, efficitur ut mauris ac, pellentesque ornare nisi. Morbi lorem justo, congue non aliquam id, suscipit vitae tellus. Proin dapibus magna enim, vel scelerisque erat pellentesque in. Nullam mauris ex, egestas nec molestie eget, tristique id tellus.</p> <h2>Another Article sub heading</h2> <p>Quisque non turpis fringilla turpis lobortis placerat pellentesque at massa. Nulla pellentesque ex finibus tortor blandit cursus. Sed ut semper eros, sed fermentum nisl. Suspendisse dapibus sagittis erat, vitae tincidunt ante tincidunt sed. Aenean mollis egestas mauris, eu sodales mi mollis quis. Nunc ac libero sagittis, facilisis nibh vitae, mollis nibh. Maecenas id ipsum id lacus posuere dignissim.</p> <p>Maecenas accumsan, elit vel ullamcorper blandit, risus odio interdum purus, at porttitor quam metus sit amet diam. Maecenas ante leo, pretium ac posuere sed, porta nec neque. Aenean auctor luctus ipsum vitae placerat. Nam et purus ut metus malesuada malesuada a at lectus. Vestibulum ac massa sollicitudin ante eleifend tincidunt ut nec lacus. Mauris sit amet sollicitudin mauris, vitae condimentum tellus. Etiam commodo dapibus diam sit amet consectetur. Nulla et interdum ipsum. Donec interdum facilisis nunc vitae hendrerit. Phasellus eget euismod magna. Sed id laoreet augue. Maecenas vitae erat nec sem tincidunt condimentum rutrum in risus.</p> <p>Nulla et finibus libero. Cras in neque sit amet felis elementum molestie. Mauris blandit eros ac lectus finibus, at eleifend turpis elementum. Nullam blandit ultrices dolor ac vulputate. Curabitur a laoreet turpis. Proin dapibus ligula posuere urna consequat dapibus. Mauris vitae rhoncus sem. Mauris tellus arcu, lobortis quis porttitor vitae, lobortis quis neque. Nulla tincidunt enim eget lorem tincidunt dictum. Ut scelerisque, turpis at sodales faucibus, purus risus pellentesque lectus, vel venenatis orci eros sed risus. Praesent cursus tempor augue, quis posuere sapien auctor nec. Integer iaculis ac velit et sagittis.</p> <h3>An article Sub-sub Heading</h3> <p>Pellentesque ac efficitur leo. Praesent imperdiet, lectus eget tristique porttitor, nulla lectus tincidunt quam, ut pretium libero mauris id dui. Phasellus posuere semper erat vel imperdiet. Quisque eu purus volutpat, pellentesque urna eu, tempor nunc. Quisque lobortis ultrices mi, quis auctor mauris iaculis mattis. Nam auctor dapibus diam eleifend laoreet. Integer non mi sit amet elit mattis sodales eu eu quam. Aenean et dolor auctor, tempor lacus vel, pellentesque ex.</p> <p>Morbi interdum nulla et nulla varius tristique. Etiam id viverra nibh. Nulla viverra metus sed augue euismod ultricies. Donec mattis fringilla magna, vel facilisis magna varius quis. Phasellus tincidunt lacus quis leo pulvinar lobortis. Nunc sed elementum purus. Vivamus sit amet ornare purus. Nam non mollis nisl. Donec in diam non lorem dictum lobortis. Praesent eget pulvinar turpis, nec finibus mauris. Phasellus blandit lacinia condimentum. Vestibulum viverra condimentum justo, non venenatis elit porta nec. Curabitur a facilisis justo, eu malesuada orci. Integer tristique porttitor odio. Nulla dignissim velit sit amet congue mollis. Ut varius, sapien quis gravida ullamcorper, justo quam bibendum erat, vitae auctor dui quam in nunc.</p> <p>Aenean ligula quam, hendrerit id velit non, convallis rhoncus tortor. Suspendisse facilisis est massa, vitae varius ligula feugiat sit amet. Praesent vel arcu in nisi pulvinar accumsan fringilla at felis. Pellentesque aliquet suscipit lacus, ac hendrerit mauris imperdiet sed. Suspendisse potenti. Nulla pretium dignissim fermentum. Sed est massa, luctus ut elit sed, sollicitudin sagittis ligula. Duis a mi consequat, porta orci vitae, consequat odio. Curabitur congue laoreet consectetur.</p> <h3>A Second Sub-sub heading</h3> <p>Aenean aliquet urna id elit malesuada, eget sagittis urna cursus. Quisque eu libero justo. Nulla dignissim a risus a condimentum. Sed nec iaculis leo. In eu nibh blandit, consequat nisl nec, elementum eros. Maecenas at risus et libero eleifend fringilla. Cras id ex consectetur, ultricies eros non, pretium ex. Quisque cursus felis neque, eu lobortis ex imperdiet eu. Sed eu malesuada turpis. Sed iaculis turpis in diam pellentesque congue. Donec sollicitudin sapien leo, ac iaculis risus vulputate ac. Donec cursus, felis sit amet viverra ullamcorper, sem ligula suscipit lacus, vel commodo orci nibh et augue. Morbi gravida ante et sapien mattis mollis ac quis lorem. Donec in libero eu tellus maximus feugiat vitae non tortor. Vivamus congue elementum laoreet. Duis sed metus ut eros tincidunt vulputate.</p> <h2>One Last Sub Heading</h2> <p>Aliquam aliquam sapien orci, ac dapibus enim lacinia nec. Nunc aliquam, massa et tristique pulvinar, elit justo fermentum ligula, a vulputate orci tortor quis eros. Pellentesque mattis velit sed odio vulputate, nec rhoncus neque sagittis. Cras ornare lorem risus, ut facilisis dui sodales a. Fusce sapien ante, suscipit id metus id, pulvinar rhoncus nibh. Phasellus venenatis dapibus ligula, vitae elementum nisl. Suspendisse libero elit, ultricies eget arcu sed, euismod ultrices ligula. Nulla eget purus iaculis lorem lacinia lacinia nec ut erat. Praesent ac arcu et lectus ullamcorper sodales viverra in libero. Praesent nulla nisi, dapibus ultricies volutpat at, consectetur et mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin a mattis lectus, id porttitor nisi. Cras fermentum imperdiet augue, sit amet placerat lectus pulvinar vel. Etiam molestie semper dignissim. Quisque commodo efficitur tellus, eget egestas orci.</p> <p>Nulla condimentum vulputate efficitur. Mauris ex ex, iaculis ut molestie vitae, efficitur a felis. Nunc et lectus lorem. Proin eu pellentesque est. Duis non efficitur sapien. Mauris rhoncus varius purus sit amet blandit. Ut accumsan ex id felis tincidunt suscipit.</p> </article> </div>
<script src="http://sitechop.com/codepen/codepen1.js" /></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://robbyk.com/assets/pen.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic jQuery Jump To Section - Script Codes CSS Codes

/* Lazy-mans Reset */
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { font-size: 100%; font-weight: 400; line-height: 1.5; font-family: 'Roboto Slab', serif;
}
h1, h2, h3, h4, h5, h6 { font-weight: 900; font-family: 'Roboto', sans-serif; font-color: #121212;
}
h1 { font-size: 2em;
}
h2 { font-size: 1.75em;
}
h3 { font-size: 1.5em;
}
ul { margin: 0 2.5em;
}
li { font-color: #121212;
}
p { color: #333;
}
.widthWrapper { max-width: 1100px; margin: 0 auto; width: 90%; overflow: hidden; padding: 2.5em 0;
}
article { float: left; width: 60%; padding-right: 2.5em;
}
nav { float: right; width: 40%;
}
article *+* { margin-top: 1.5em;
}
article li { margin-top: 0.75em;
}
.jumpTo ul { background-color: #eeeeee; padding: 1.5em; border-radius: 5px;
}
.jumpTo li { list-style: none; margin-bottom: 0.75em; padding-bottom: 0.75em; border-bottom: 1px solid #ccc;
}
.jumpTo li:hover { cursor: pointer;
}

Dynamic jQuery Jump To Section - Script Codes JS Codes

// Create variable of article tag.
var article = $('article');
// Insert a nav and empty ul after article
$('<nav class="jumpTo"><ul></ul></nav>').insertAfter(article);
// Grabs all h2's inside article
var articleHeadings = $('article h2');
// Opens an each loop for articleHeadings.
articleHeadings.each(function(){ // Grabs the heading text from the current element. var headingText = $(this).text(); // Creates an LI out of heading text var headingLi = '<li>' + headingText + '</li>' // Inserts it to our ul $('.jumpTo ul').append(headingLi)
});
// Open a second each function for the li's
$('.jumpTo li').click(function(){ // Grabs the current elements index var index = $(this).index() //Grabs the corresponding h2 var heading = $( 'article h2:eq(' + index + ')' ) // Grabs the headings top offset var position = $(heading).offset().top - 10 // Selects the entire page $('html,body') // Animates the scroll .animate({ // Scrolls to our position varable scrollTop: position });
});
Dynamic jQuery Jump To Section - Script Codes
Dynamic jQuery Jump To Section - Script Codes
Home Page Home
Developer Robby Klein
Username robbyklein
Uploaded July 07, 2022
Rating 3
Size 5,780 Kb
Views 40,480
Do you need developer help for Dynamic jQuery Jump To Section?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robby Klein (robbyklein) Script Codes
Name
Youtube Embedded Transcripts
FullScreen Vimeo Popup with Autoplay and CSS3 Transitions
Reveal image as window gets wider
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!