Single-page scrolling web Template development

• Online Demo 1
• Local Downloads

jquery is the most popular JS framework today, and with jquery we can develop a lot of efficient demos and results. At the same time, jquery-related plug-ins can also be very convenient to complete some special effects, such as the jquery Scrollto plug-in, you can easily complete the swipe to the specified location operation. Remember that because jquery Scrollto plugins are dependent on jquery, it is necessary to refer to the jquery file when referring to the header file

Main points: (original link: http://www.gbtags.com/gb/share/5641.htm)

• JQuery Scrollto Plugin
• jquery Framework

Show the navigation title as an example

By navigating the title, the search can be clicked into the appropriate section

2. <nav id="Stickynav">
4. <ul id="NAV" class="Clearfix">
6. <li><a href="#topbar"> home </a></li>
8. <li><a href="#about"> About us </a></li>
10. <li><a href="#photos"> geek Atlas </a></li>
12. <li><a href="#contact"> Contact us </a></li>
14. </ul>
16. </nav>

The entire page content is divided into 4 sections, each section shows different related content, according to the ID name when clicked each link will slide to the corresponding position, below is one section, this section simple display some content statement, can according to individual needs, write the corresponding code

Structure Show

1. <section id="Topbar" class="section">
2. single page slide effects
3. <p> Click each navigation option to achieve a basic sliding effect, and the contents of the other pages are from </p>
4. </section>

In the same page involved in the above 4 modules, do not want to sub-page display, I hope in a page can quickly and efficiently find relevant content, at this time using the jquery Scrollto plug-in mouse click event, to perform the corresponding effect, code as follows, because <a> The link itself has a hash property, and the hash is a readable, writable string that is the anchor part of the URL (the part that begins with the # number). When you click the navigation button, the Scrollto method is triggered, $.scrollto with two parameters, the first is the target ID to scroll, The second parameter is the scrolling interval, in milliseconds. In this example, only the basic method of Scrollto is applied. In fact, ScrollTo can also specify horizontal longitudinal scrolling, transmission effect, etc., in particular, can refer to the official website example: http://demos.flesler.com/jquery/scrollTo/

Event handling

2. <script>
4. $(function() {
6. $("#nav a"). Click(function(e) {
8. E. Preventdefault();
10. $(' html,body '). ScrollTo(this. Hash,this. Hash);
12. });
14. });
16. </script>

The <script> code can be embedded directly into an HTML page, or it can be written as an external file for introduction.

Add style Finally, according to the DOM structure of the personal HTML, write the corresponding CSS code, to beautify the page, for example, to beautify the navigation title, designed to resemble a button shape

2. #stickynav #nav li {display:inline;}
4. #stickynav #nav Li a {
6. Display: block;
8. float: left;
10. Margin-right: 8px;
12. Font-size: 1.5em;
14. Font-weight: $ ;
16. Padding: 11px 8px;
18. Background: #ff9900;
20. -WebKit-Border-radius: 4px;
22. -Moz-Border-radius: 4px;
24. Border-radius: 4px;
26. Color: #ffffff;
28. }

Conclusion

jquery has a lot of flexible widgets that can help us write a lot less code when we work, and save time with low maintenance costs.

If you are interested, you can go to the Community's course library for more study.

(Original link: http://www.gbtags.com/gb/share/5641.htm)

Like the front-end technology students, you can continue to pay attention to my article and click the button below to pay attention to my oh, ^_^, we communicate and progress together ~ ~ ~ ~, I hope that my article, please leave a message, irrigation on the need, to order dry message, hehe ~ ~

Single-page scrolling web Template development