\u30da\u30fc\u30b8\u5185\u30ea\u30f3\u30af<\/b>\u3092\u4f7f\u3063\u3066\u3001\u30da\u30fc\u30b8\u5185<\/b>\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u30b9\u30af\u30ed\u30fc\u30eb<\/b>\u3057\u307e\u3059\u3002<\/p>\n
\u30a2\u30f3\u30ab\u30fc\u30dd\u30a4\u30f3\u30c8\u306b\u30ea\u30f3\u30af<\/b>\u3092\u8cbc\u3063\u3066\u3001\u79fb\u52d5\u3055\u305b\u305f\u3044\u5148\u306eid\u540d\u306b#\u3092\u4ed8\u3051\u3066href=\u306b\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002
\n\u7e26\u9577<\/b>\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3067\u3001\u8a18\u4e8b\u304c\u591a\u3044\u3068\u304d\u306a\u3069\u306b\u4fbf\u5229\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
<\/p>\n
\u25bc\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
<script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(function(){\r\n $('a[href^=#]').click(function() {\r\n var speed = 800;\r\n\t \r\n var href= $(this).attr(\"href\");\r\n\t \r\n var target = $(href == \"#\" || href == \"\" ? 'html' : href);\r\n\t \r\n var position = target.offset().top;\r\n\t \r\n $('body,html').animate({scrollTop:position}, speed, 'swing');\r\n return false;\r\n });\r\n});\r\n<\/script><\/pre>\n\u25bcCSS<\/p>\n
<style type=\"text\/css\">\r\nbody {\r\n\tfont: 100% Arial, Helvetica, sans-serif;\r\n}\r\ndiv {\r\n\twidth:auto;\r\n\theight:500px;\r\n}\r\nul {\r\n\tlist-style: none;\r\n}\r\nli {\r\n\tmargin-top: 10px;\r\n}\r\na {\r\n\ttext-decoration: none;\r\n\tcolor: #000;\r\n}\r\n<\/style><\/pre>\n\u25bcHTML<\/p>\n
<h2 id=\"top\">MENU<\/h2>\r\n<ul>\r\n <li><a href=\"#1\">section1<\/a><\/li>\r\n <li><a href=\"#2\">section2<\/a><\/li>\r\n <li><a href=\"#3\">section3<\/a><\/li>\r\n <li><a href=\"#4\">section4<\/a><\/li>\r\n <li><a href=\"#5\">section5<\/a><\/li>\r\n <li><a href=\"#6\">section6<\/a><\/li>\r\n<\/ul>\r\n<div id=\"1\">\r\n <h2>section1<\/h2>\r\n <a class=\"button\" href=\"#top\">\u25b2 MENU\u306b\u623b\u308b<\/a> <\/div>\r\n<div id=\"2\">\r\n <h2>section2<\/h2>\r\n <a class=\"button\" href=\"#top\">\u25b2 MENU\u306b\u623b\u308b<\/a> <\/div>\r\n<div id=\"3\">\r\n <h2>section3<\/h2>\r\n <a class=\"button\" href=\"#top\">\u25b2 MENU\u306b\u623b\u308b<\/a> <\/div>\r\n<div id=\"4\">\r\n <h2>section4<\/h2>\r\n <a class=\"button\" href=\"#top\">\u25b2 MENU\u306b\u623b\u308b<\/a> <\/div>\r\n<div id=\"5\">\r\n <h2>section5<\/h2>\r\n <a class=\"button\" href=\"#top\">\u25b2 MENU\u306b\u623b\u308b<\/a> <\/div>\r\n<div id=\"6\">\r\n <h2>section6<\/h2>\r\n <a class=\"button\" href=\"#top\">\u25b2 MENU\u306b\u623b\u308b<\/a> <\/div><\/pre>\n\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001
\n\u300ejQuery \u3068\u3063\u3066\u3082\u7c21\u5358\u3001\u30da\u30fc\u30b8\u5185\u30ea\u30f3\u30af\u3067\u30b9\u30e0\u30fc\u30ba\u30b9\u30af\u30ed\u30fc\u30eb – KYASPER<\/a>\u300f\u3055\u3093\u3067\u3059\u3002
\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n