Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type"content=
- "text/html; charset="UTF-8">
- <title>Untitled Document</title>
- <style type="text/css">
- body {
- margin:0;
- font:30px Arial, Helvetica, sans-serif;
- }
- section {
- background-color: #09C;
- display: block;
- height: 2000px;
- padding:60px;
- padding-left:120px;
- }
- #one{
- background:#0C2C59;
- color:#FFF;
- }
- #two{
- background:#04528A;
- color:#FFF;
- }
- #three{
- background:#279C5C;
- color:#FFF;
- }
- #four{
- background:#257D2A;
- color:#FFF;
- }
- #five{
- background:#34631F;
- color:#FFF;
- }
- nav {
- position:fixed;
- }
- body nav a {
- font-size: 12px;
- color: #FFF;
- background-color: #000;
- text-align: center;
- display: block;
- margin: 3px;
- padding: 10px;
- }
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- function filterPath(string) {
- return string
- .replace(/^\//,'')
- .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
- .replace(/\/$/,'');
- }
- var locationPath = filterPath(location.pathname);
- var scrollElem = scrollableElement('html', 'body');
- $('a[href*=#]').each(function() {
- var thisPath = filterPath(this.pathname) || locationPath;
- if ( locationPath == thisPath
- && (location.hostname == this.hostname || !this.hostname)
- && this.hash.replace(/#/,'') ) {
- var $target = $(this.hash), target = this.hash;
- if (target) {
- var targetOffset = $target.offset().top;
- $(this).click(function(event) {
- event.preventDefault();
- $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
- location.hash = target;
- });
- });
- }
- }
- });
- // use the first element that is "scrollable"
- function scrollableElement(els) {
- for (var i = 0, argLength = arguments.length; i <argLength; i++) {
- var el = arguments[i],
- $scrollElement = $(el);
- if ($scrollElement.scrollTop()> 0) {
- return el;
- } else {
- $scrollElement.scrollTop(1);
- var isScrollable = $scrollElement.scrollTop()> 0;
- $scrollElement.scrollTop(0);
- if (isScrollable) {
- return el;
- }
- }
- }
- return [];
- }
- });
- </script>
- </head>
- <body>
- <nav><a href="#one">one</a> <a href="#two">two</a> <a href="#three">three</a> <a href="#four">four</a> <a href="#five">five</a></nav>
- <section id="one">Page One<p> how do i make this text smaller?</section>
- <section id="two">Page Two</section>
- <section id="three">Page Three</section>
- <section id="four">Page Four</section>
- <section id="five">Page Five</section>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement