jQuery - To performs a smooth page scroll to an anchor on the same page -
it performs smooth page scroll anchor on same page.
new jquery , trying understand code. how jquery function called each time top 2 links clicked? of belief function execute when document has been parsed , ready. @ time link has not been clicked yet. how executed when link clicked?
<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> // shorthand $(document).ready(). fires when document has been parsed , ready. $(function() { // select links hashes. // remove links don't link anything. $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { // figure out element scroll to. var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); // scroll target exist? if (target.length) { $('html,body').animate({ scrolltop: target.offset().top }, 1000); return false; } } }); }); </script> <!-- internal css style sheet. --> <style type="text/css"> body { font: 14px/2 georgia, serif; } #page-wrap { max-width: 500px; margin: 1rem auto; padding: 1rem; } h1, h2 { line-height: 1.2; } p, ul, h1 { margin: 0 0 1rem 0; } </style> </head> <body> <div id="page-wrap"> <h1 id="top">smooth page scrolling</h1> <ul> <li><a href="#two">scroll section two</a></li> <li><a href="#three">scroll section three</a></li> </ul> <h2 id="one">section one</h2> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <h2 id="two">section two</h2> <p><a href="#top">top</a></p> <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <h2 id="three">section three</h2> <p><a href="#top">top</a></p> <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </body> </html>
jquery's $(function() runs when dom (document object model) has loaded. means components of html document ready have events attached them.
the line $('a[href*=#]:not([href=#])').click(function() event listener waiting click event.
the 'a[href*=#]:not([href=#])' selector instructs jquery listen click event on anchor has # in (e.g <a href="#two">), excluding anchor that's # (e.g <a href="#">).
Comments
Post a Comment