[{"data":1,"prerenderedAt":412},["ShallowReactive",2],{"article-jquery-anker":3},{"id":4,"title":5,"body":6,"category":399,"createdAt":401,"description":5,"extension":402,"index":403,"meta":404,"navigation":118,"path":405,"publish":118,"seo":406,"series":403,"seriesTitle":403,"stem":407,"tag":408,"thumbnail":403,"updatedAt":403,"__hash__":411},"articles\u002Farticles\u002Fjquery-anker.md","jqueryを用いてページの特定箇所までアニメーションスクロールさせる方法",{"type":7,"value":8,"toc":393},"minimark",[9,13,17,20,348,359,362,365,369,372,375,378,383,386,389],[10,11,12],"p",{},"こんにちはjunです。どちらかというとメモ的な内容になります。このサイトの「目次」にも実装されているような、見出し名をクリックするとそのコンテンツが書いてある場所まで飛ぶ動きを実装させます。",[14,15,16],"h2",{"id":16},"自動スクロールの原理",[10,18,19],{},"この自動スクロールの原理について解説します。",[21,22,27],"pre",{"className":23,"code":24,"language":25,"meta":26,"style":26},"language-javascript shiki shiki-themes material-theme-ocean","$('a[href^=#]').on('click',function() {\n    \u002F\u002F スクロールの速度\n    var speed = 400; \u002F\u002F ミリ秒\n\n    \u002F\u002F アンカーの値取得（aタグのhref属性）\n    var href= $(this).attr(\"href\");\n\n    \u002F\u002F 移動先の要素を取得\n    var target = $(href == \"#\" || href == \"\" ? 'html' : href);\n\n    \u002F\u002F 移動先の高さを取得\n    var position = target.offset().top;\n\n    \u002F\u002F スムーススクロール\n    $('body,html').animate({scrollTop:position}, speed, 'swing');\n});\n","javascript","",[28,29,30,84,91,113,120,126,168,173,179,236,241,247,273,278,284,338],"code",{"__ignoreMap":26},[31,32,35,39,43,47,51,53,56,59,62,64,66,69,71,74,78,81],"span",{"class":33,"line":34},"line",1,[31,36,38],{"class":37},"sdLwU","$",[31,40,42],{"class":41},"s0W1g","(",[31,44,46],{"class":45},"sAklC","'",[31,48,50],{"class":49},"sfyAc","a[href^=#]",[31,52,46],{"class":45},[31,54,55],{"class":41},")",[31,57,58],{"class":45},".",[31,60,61],{"class":37},"on",[31,63,42],{"class":41},[31,65,46],{"class":45},[31,67,68],{"class":49},"click",[31,70,46],{"class":45},[31,72,73],{"class":45},",",[31,75,77],{"class":76},"sJ14y","function",[31,79,80],{"class":45},"()",[31,82,83],{"class":45}," {\n",[31,85,87],{"class":33,"line":86},2,[31,88,90],{"class":89},"sC9rS","    \u002F\u002F スクロールの速度\n",[31,92,94,97,100,103,107,110],{"class":33,"line":93},3,[31,95,96],{"class":76},"    var",[31,98,99],{"class":41}," speed",[31,101,102],{"class":45}," =",[31,104,106],{"class":105},"sx098"," 400",[31,108,109],{"class":45},";",[31,111,112],{"class":89}," \u002F\u002F ミリ秒\n",[31,114,116],{"class":33,"line":115},4,[31,117,119],{"emptyLinePlaceholder":118},true,"\n",[31,121,123],{"class":33,"line":122},5,[31,124,125],{"class":89},"    \u002F\u002F アンカーの値取得（aタグのhref属性）\n",[31,127,129,131,134,137,140,143,146,148,150,153,155,158,161,163,165],{"class":33,"line":128},6,[31,130,96],{"class":76},[31,132,133],{"class":41}," href",[31,135,136],{"class":45},"=",[31,138,139],{"class":37}," $",[31,141,42],{"class":142},"s-wAU",[31,144,145],{"class":45},"this",[31,147,55],{"class":142},[31,149,58],{"class":45},[31,151,152],{"class":37},"attr",[31,154,42],{"class":142},[31,156,157],{"class":45},"\"",[31,159,160],{"class":49},"href",[31,162,157],{"class":45},[31,164,55],{"class":142},[31,166,167],{"class":45},";\n",[31,169,171],{"class":33,"line":170},7,[31,172,119],{"emptyLinePlaceholder":118},[31,174,176],{"class":33,"line":175},8,[31,177,178],{"class":89},"    \u002F\u002F 移動先の要素を取得\n",[31,180,182,184,187,189,191,193,195,198,201,204,206,209,211,213,216,219,222,225,227,230,232,234],{"class":33,"line":181},9,[31,183,96],{"class":76},[31,185,186],{"class":41}," target",[31,188,102],{"class":45},[31,190,139],{"class":37},[31,192,42],{"class":142},[31,194,160],{"class":41},[31,196,197],{"class":45}," ==",[31,199,200],{"class":45}," \"",[31,202,203],{"class":49},"#",[31,205,157],{"class":45},[31,207,208],{"class":45}," ||",[31,210,133],{"class":41},[31,212,197],{"class":45},[31,214,215],{"class":45}," \"\"",[31,217,218],{"class":45}," ?",[31,220,221],{"class":45}," '",[31,223,224],{"class":49},"html",[31,226,46],{"class":45},[31,228,229],{"class":45}," :",[31,231,133],{"class":41},[31,233,55],{"class":142},[31,235,167],{"class":45},[31,237,239],{"class":33,"line":238},10,[31,240,119],{"emptyLinePlaceholder":118},[31,242,244],{"class":33,"line":243},11,[31,245,246],{"class":89},"    \u002F\u002F 移動先の高さを取得\n",[31,248,250,252,255,257,259,261,264,266,268,271],{"class":33,"line":249},12,[31,251,96],{"class":76},[31,253,254],{"class":41}," position",[31,256,102],{"class":45},[31,258,186],{"class":41},[31,260,58],{"class":45},[31,262,263],{"class":37},"offset",[31,265,80],{"class":142},[31,267,58],{"class":45},[31,269,270],{"class":41},"top",[31,272,167],{"class":45},[31,274,276],{"class":33,"line":275},13,[31,277,119],{"emptyLinePlaceholder":118},[31,279,281],{"class":33,"line":280},14,[31,282,283],{"class":89},"    \u002F\u002F スムーススクロール\n",[31,285,287,290,292,294,297,299,301,303,306,308,311,314,317,320,323,325,327,329,332,334,336],{"class":33,"line":286},15,[31,288,289],{"class":37},"    $",[31,291,42],{"class":142},[31,293,46],{"class":45},[31,295,296],{"class":49},"body,html",[31,298,46],{"class":45},[31,300,55],{"class":142},[31,302,58],{"class":45},[31,304,305],{"class":37},"animate",[31,307,42],{"class":142},[31,309,310],{"class":45},"{",[31,312,313],{"class":142},"scrollTop",[31,315,316],{"class":45},":",[31,318,319],{"class":41},"position",[31,321,322],{"class":45},"},",[31,324,99],{"class":41},[31,326,73],{"class":45},[31,328,221],{"class":45},[31,330,331],{"class":49},"swing",[31,333,46],{"class":45},[31,335,55],{"class":142},[31,337,167],{"class":45},[31,339,341,344,346],{"class":33,"line":340},16,[31,342,343],{"class":45},"}",[31,345,55],{"class":41},[31,347,167],{"class":45},[10,349,350,351,354,355,358],{},"aタグのhref属性の文字列",[28,352,353],{},"[href=”#hoge”]","と移動先の要素にID",[28,356,357],{},"\u003Cdiv id=”hoge”>\u003C\u002Fdiv>","とさせることでこのスクロールができます。",[10,360,361],{},"しかし、原理的に必要なものは",[10,363,364],{},"どの場所に飛ばすかの情報を持ったトリガー（今回のaタグ）\n自身の場所を示すページ内で一意のIDをもつクラスまたはID\nがあれば可能です。しかし後述する理由よりできたらページスイングはaタグで行い、IDで区別する方法が中規模以上のサイトでは便利です。",[14,366,368],{"id":367},"url-そのページ内のdom-idを参照している","URL + # =そのページ内のDOM IDを参照している",[10,370,371],{},"今回のスクロールではトリガーとなるaタグをクリックすると、urlに「#hoge」というのが付きます。実はurlに#がつくと、",[10,373,374],{},"そのurlつまり、そのページ内におけるDOMと#以降の文字列に合致する要素に飛ばしてくれます。実はJSがなくても自動スクロースができます。ただしアニメーションもなく画面が一瞬で切り替わるので、味気っぽなさはあります。",[10,376,377],{},"js(jquery)ではアニメーションを実装したいので書いただけです。",[379,380,382],"h3",{"id":381},"つきで行うメリット","#つきで行うメリット",[10,384,385],{},"#を用いて移動先の要素を取得してアニメーションを実装すると、「url+#」でアクセスしたときにもアニメーションスクロールが効くように改変が可能になります。",[10,387,388],{},"今回はその実装はありませんが、Webにそのわっている機能を下地にスクリプトを書いた方が、独自のスクリプトより拡張性が高くなります。",[390,391,392],"style",{},"html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":26,"searchDepth":93,"depth":93,"links":394},[395,396],{"id":16,"depth":86,"text":16},{"id":367,"depth":86,"text":368,"children":397},[398],{"id":381,"depth":93,"text":382},[400],"ministack","2020-05-01","md",null,{},"\u002Farticles\u002Fjquery-anker",{"title":5,"description":5},"articles\u002Fjquery-anker",[409,410],"js","jquery","m8IR5HZJkkmOljGoU2QAnguTcrNVhjIf3JLMRS3OI-s",1780987143460]