{"id":287,"date":"2025-06-28T18:11:00","date_gmt":"2025-06-28T15:11:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=287"},"modified":"2026-03-09T15:41:13","modified_gmt":"2026-03-09T13:41:13","slug":"animated-scroll-anchorid-function-jquery","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/","title":{"rendered":"Animated scroll to #anchor \/ id function with jQuery"},"content":{"rendered":"<p>Using the <em>name<\/em> attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being clicked. We want to do this animated, not just an instant jump to the target position.<\/p>\n<p><a href=\"\/articles\/animated-scroll-anchorid-function-jquery\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-288\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg\" alt=\"animated scroll to anchor id script\" width=\"700\" height=\"346\" srcset=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg 700w, https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id-300x148.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><!--more--><\/p>\n<p>The jQuery script we&#8217;re using for this works similar to our <a href=\"\/articles\/dynamic-scroll-back-top-page-button-javascript\/\">scroll back to top widget<\/a> and it should be part of all your project and it&#8217;s as simple as possible.<\/p>\n<h2>The HTML code<\/h2>\n<pre style=\"background: #fff; color: #000;\"><span style=\"color: #1c02ff;\">&lt;<span style=\"font-weight: bold;\">a<\/span> <span style=\"font-style: italic;\">href<\/span>=<span style=\"color: #d80800;\">\"#anchor1\"<\/span> <span style=\"font-style: italic;\">class<\/span>=<span style=\"color: #d80800;\">\"scrollLink\"<\/span>&gt;<\/span>Scroll to anchor 1<span style=\"color: #1c02ff;\">&lt;\/<span style=\"font-weight: bold;\">a<\/span>&gt;<\/span>\n<span style=\"color: #1c02ff;\">&lt;<span style=\"font-weight: bold;\">a<\/span> <span style=\"font-style: italic;\">href<\/span>=<span style=\"color: #d80800;\">\"#anchor2\"<\/span> <span style=\"font-style: italic;\">class<\/span>=<span style=\"color: #d80800;\">\"scrollLink\"<\/span>&gt;<\/span>Scroll to anchor 2<span style=\"color: #1c02ff;\">&lt;\/<span style=\"font-weight: bold;\">a<\/span>&gt;<\/span>\n<span style=\"color: #1c02ff;\">&lt;<span style=\"font-weight: bold;\">p<\/span> <span style=\"font-style: italic;\">id<\/span>=<span style=\"color: #d80800;\">\"anchor1\"<\/span>&gt;<\/span><span style=\"color: #1c02ff;\">&lt;<span style=\"font-weight: bold;\">strong<\/span>&gt;<\/span>Anchor 1<span style=\"color: #1c02ff;\">&lt;\/<span style=\"font-weight: bold;\">strong<\/span>&gt;<\/span> - Lorem ipsum dolor sit amet, nonumes voluptatum mel ea.<span style=\"color: #1c02ff;\">&lt;\/<span style=\"font-weight: bold;\">p<\/span>&gt;<\/span>\n<span style=\"color: #1c02ff;\">&lt;<span style=\"font-weight: bold;\">p<\/span> <span style=\"font-style: italic;\">id<\/span>=<span style=\"color: #d80800;\">\"anchor2\"<\/span>&gt;<\/span><span style=\"color: #1c02ff;\">&lt;<span style=\"font-weight: bold;\">strong<\/span>&gt;<\/span>Anchor 2<span style=\"color: #1c02ff;\">&lt;\/<span style=\"font-weight: bold;\">strong<\/span>&gt;<\/span> - Ex ignota epicurei quo, his ex doctus delenit fabellas.<span style=\"color: #1c02ff;\">&lt;\/<span style=\"font-weight: bold;\">p<\/span>&gt;<\/span>\n<\/pre>\n<p>I added two links and two tags with the matching identifiers. I marked the scrolling links with a class: <strong>scrollLink<\/strong> and set its href attribute to match with the ID of the destination.<\/p>\n<h2>The script to use<\/h2>\n<pre style=\"background: #fff; color: #000;\"><span style=\"color: #687687;\">$<\/span>(<span style=\"color: #6d79de; font-weight: bold;\">document<\/span>).ready(function(){\n    <span style=\"color: #687687;\">$<\/span>( <span style=\"color: #d80800;\">\"a.scrollLink\"<\/span> ).<span style=\"color: #3c4c72; font-weight: bold;\">click<\/span>(function( <span style=\"color: #6d79de; font-weight: bold;\">event<\/span> ) {\n        <span style=\"color: #6d79de; font-weight: bold;\">event<\/span>.preventDefault();\n        <span style=\"color: #687687;\">$<\/span>(<span style=\"color: #d80800;\">\"html, body\"<\/span>).animate({ scrollTop: <span style=\"color: #687687;\">$<\/span>(<span style=\"color: #687687;\">$<\/span>(<span style=\"color: #0206ff; font-style: italic;\">this<\/span>).attr(<span style=\"color: #d80800;\">\"href\"<\/span>)).offset().<span style=\"color: #06960e; font-weight: bold;\">top<\/span> }, <span style=\"color: #cd0000; font-style: italic;\">500<\/span>);\n    });\n});\n<\/pre>\n<p>The script is placed inside the document.ready section so don&#8217;t forget to <a href=\"https:\/\/htmlcheatsheet.com\/jquery\/\" target=\"_blank\" rel=\"noopener noreferrer\">include jQuery<\/a> when using this method.<\/p>\n<p>I set an event listener to the <em>scrollLink<\/em> anchor tags and requested them not to behave like the default. The next line scrolls the HTML and Body elements to the requested position. You can speed up or slow down the scrolling speed adjusting the value at the end. The current 500 milliseconds means a half second.<\/p>\n<p>Test the script in action on <a href=\"https:\/\/jsfiddle.net\/7pat4rjk\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSFiddle<\/a>. For some reason the scrolling is not smooth but this is going to work when you do it on a live site.<\/p>\n<h2>Automatically smooth-scroll if a link starts with #<\/h2>\n<p>Use this short script with old browser support and you don&#8217;t have to manually add the classes to the anchors:<\/p>\n<pre style=\"color:#000000;background:#ffffff;\">$<span style=\"color:#808030; \">(<\/span>document<span style=\"color:#808030; \">)<\/span><span style=\"color:#808030; \">.<\/span>on<span style=\"color:#808030; \">(<\/span><span style=\"color:#800000; \">'<\/span><span style=\"color:#0000e6; \">click<\/span><span style=\"color:#800000; \">'<\/span><span style=\"color:#808030; \">,<\/span> <span style=\"color:#800000; \">'<\/span><span style=\"color:#0000e6; \">a[href^=\"#\"]<\/span><span style=\"color:#800000; \">'<\/span><span style=\"color:#808030; \">,<\/span> <span style=\"color:#800000; font-weight:bold; \">function<\/span> <span style=\"color:#808030; \">(<\/span>event<span style=\"color:#808030; \">)<\/span> <span style=\"color:#800080; \">{<\/span>\n\tevent<span style=\"color:#808030; \">.<\/span>preventDefault<span style=\"color:#808030; \">(<\/span><span style=\"color:#808030; \">)<\/span><span style=\"color:#800080; \">;<\/span>\n\n\t$<span style=\"color:#808030; \">(<\/span><span style=\"color:#800000; \">'<\/span><span style=\"color:#0000e6; \">html, body<\/span><span style=\"color:#800000; \">'<\/span><span style=\"color:#808030; \">)<\/span><span style=\"color:#808030; \">.<\/span>animate<span style=\"color:#808030; \">(<\/span><span style=\"color:#800080; \">{<\/span>\n\t\tscrollTop<span style=\"color:#800080; \">:<\/span> $<span style=\"color:#808030; \">(<\/span>$<span style=\"color:#808030; \">.<\/span>attr<span style=\"color:#808030; \">(<\/span><span style=\"color:#800000; font-weight:bold; \">this<\/span><span style=\"color:#808030; \">,<\/span> <span style=\"color:#800000; \">'<\/span><span style=\"color:#0000e6; \">href<\/span><span style=\"color:#800000; \">'<\/span><span style=\"color:#808030; \">)<\/span><span style=\"color:#808030; \">)<\/span><span style=\"color:#808030; \">.<\/span>offset<span style=\"color:#808030; \">(<\/span><span style=\"color:#808030; \">)<\/span><span style=\"color:#808030; \">.<\/span>top\n\t<span style=\"color:#800080; \">}<\/span><span style=\"color:#808030; \">,<\/span> <span style=\"color:#008c00; \">500<\/span><span style=\"color:#808030; \">)<\/span><span style=\"color:#800080; \">;<\/span>\n<span style=\"color:#800080; \">}<\/span><span style=\"color:#808030; \">)<\/span><span style=\"color:#800080; \">;<\/span>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Using the name attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being clicked. We want to do this animated, not just an instant jump to the target position.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,5,6],"tags":[],"class_list":["post-287","post","type-post","status-publish","format-standard","hentry","category-articles","category-freebies","category-javascript","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animated scroll to anchor\/id function with jQuery Script<\/title>\n<meta name=\"description\" content=\"Using the name attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated scroll to anchor\/id function with jQuery Script\" \/>\n<meta property=\"og:description\" content=\"Using the name attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-28T15:11:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-09T13:41:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"346\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Animated scroll to #anchor \/ id function with jQuery\",\"datePublished\":\"2025-06-28T15:11:00+00:00\",\"dateModified\":\"2026-03-09T13:41:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/\"},\"wordCount\":262,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg\",\"articleSection\":[\"Articles\",\"Freebies\",\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/\",\"url\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/\",\"name\":\"Animated scroll to anchor\/id function with jQuery Script\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg\",\"datePublished\":\"2025-06-28T15:11:00+00:00\",\"dateModified\":\"2026-03-09T13:41:13+00:00\",\"description\":\"Using the name attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg\",\"width\":700,\"height\":346,\"caption\":\"animated scroll to anchor id script\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated scroll to #anchor \/ id function with jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated scroll to anchor\/id function with jQuery Script","description":"Using the name attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/","og_locale":"en_GB","og_type":"article","og_title":"Animated scroll to anchor\/id function with jQuery Script","og_description":"Using the name attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being","og_url":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2025-06-28T15:11:00+00:00","article_modified_time":"2026-03-09T13:41:13+00:00","og_image":[{"width":700,"height":346,"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg","type":"image\/jpeg"}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Animated scroll to #anchor \/ id function with jQuery","datePublished":"2025-06-28T15:11:00+00:00","dateModified":"2026-03-09T13:41:13+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/"},"wordCount":262,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg","articleSection":["Articles","Freebies","JavaScript","jQuery"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/","url":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/","name":"Animated scroll to anchor\/id function with jQuery Script","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg","datePublished":"2025-06-28T15:11:00+00:00","dateModified":"2026-03-09T13:41:13+00:00","description":"Using the name attribute of the anchor tag has become obsolete so we have to find a new way to scroll to a certain point on the page when a link is being","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/jquery-animated-scroll-anchor-id.jpg","width":700,"height":346,"caption":"animated scroll to anchor id script"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/animated-scroll-anchorid-function-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Animated scroll to #anchor \/ id function with jQuery"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=287"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":2554,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/287\/revisions\/2554"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}