{"id":1407,"date":"2013-02-01T07:39:40","date_gmt":"2013-02-01T07:39:40","guid":{"rendered":"http:\/\/www.robertprice.co.uk\/robblog\/?p=1407"},"modified":"2013-02-01T07:39:40","modified_gmt":"2013-02-01T07:39:40","slug":"using-jquery-to-scroll-to-an-element","status":"publish","type":"post","link":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/","title":{"rendered":"jQuery To Scroll To A Specific Element"},"content":{"rendered":"<p>I thought I&#8217;d share a useful snippit of <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> code for scrolling to a specific element on a page.<\/p>\n<pre class=\"lang:js decode:true \" >$('html, body').animate({\n    scrollTop: ($('#element').offset().top)\n},500);<\/pre>\n<p>We use the <a href=\"http:\/\/api.jquery.com\/animate\/\">.animate()<\/a> method to scroll to the top of #element, over a period of 500 milliseconds.<\/p>\n<h2>jQuery To Scroll To The First Element With A Specific Class<\/h2>\n<p>A practical use of this could be in validating a form and you want to scroll to the first error for the user to correct. Assuming all elements with problems have been given the class of error, we can scroll to the first one using jQuery&#8217;s <a href=\"http:\/\/api.jquery.com\/first\/\">.first()<\/a> method before chaining on <a href=\"http:\/\/api.jquery.com\/offset\/\">.offset()<\/a> and the property top as before.<\/p>\n<pre class=\"lang:js decode:true \" >$('html, body').animate({\n    scrollTop: ($('.error').first().offset().top)\n},500);<\/pre>\n<p>Now, go get scrolling!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I thought I&#8217;d share a useful snippit of jQuery code for scrolling to a specific element on a page. $(&#8216;html, body&#8217;).animate({ scrollTop: ($(&#8216;#element&#8217;).offset().top) },500); We use the .animate() method to scroll to the top of #element, over a period of 500 milliseconds. jQuery To Scroll To The First Element With A Specific Class A practical &hellip; <a href=\"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;jQuery To Scroll To A Specific Element&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[31,32,75],"class_list":["post-1407","post","type-post","status-publish","format-standard","hentry","category-dev","tag-javascript","tag-jquery","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>jQuery To Scroll To A Specific Element<\/title>\n<meta name=\"description\" content=\"An example of how to use jQuery to scroll to a specific element on a web page.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery To Scroll To A Specific Element\" \/>\n<meta property=\"og:description\" content=\"An example of how to use jQuery to scroll to a specific element on a web page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/\" \/>\n<meta property=\"og:site_name\" content=\"Robert Price\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-01T07:39:40+00:00\" \/>\n<meta name=\"author\" content=\"rob\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rob\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/\"},\"author\":{\"name\":\"rob\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"headline\":\"jQuery To Scroll To A Specific Element\",\"datePublished\":\"2013-02-01T07:39:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/\"},\"wordCount\":118,\"keywords\":[\"JavaScript\",\"jQuery\",\"Web Development\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/\",\"name\":\"jQuery To Scroll To A Specific Element\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\"},\"datePublished\":\"2013-02-01T07:39:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"description\":\"An example of how to use jQuery to scroll to a specific element on a web page.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/using-jquery-to-scroll-to-an-element\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery To Scroll To A Specific Element\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\",\"name\":\"Robert Price\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\",\"name\":\"rob\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"caption\":\"rob\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery To Scroll To A Specific Element","description":"An example of how to use jQuery to scroll to a specific element on a web page.","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:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/","og_locale":"en_GB","og_type":"article","og_title":"jQuery To Scroll To A Specific Element","og_description":"An example of how to use jQuery to scroll to a specific element on a web page.","og_url":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/","og_site_name":"Robert Price","article_published_time":"2013-02-01T07:39:40+00:00","author":"rob","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rob","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/#article","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/"},"author":{"name":"rob","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"headline":"jQuery To Scroll To A Specific Element","datePublished":"2013-02-01T07:39:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/"},"wordCount":118,"keywords":["JavaScript","jQuery","Web Development"],"articleSection":["Dev"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/","url":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/","name":"jQuery To Scroll To A Specific Element","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website"},"datePublished":"2013-02-01T07:39:40+00:00","author":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"description":"An example of how to use jQuery to scroll to a specific element on a web page.","breadcrumb":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertprice.co.uk\/robblog\/using-jquery-to-scroll-to-an-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertprice.co.uk\/robblog\/"},{"@type":"ListItem","position":2,"name":"jQuery To Scroll To A Specific Element"}]},{"@type":"WebSite","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website","url":"https:\/\/www.robertprice.co.uk\/robblog\/","name":"Robert Price","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertprice.co.uk\/robblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5","name":"rob","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","caption":"rob"}}]}},"_links":{"self":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/1407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":0,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/1407\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/media?parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/categories?post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/tags?post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}