{"id":1222,"date":"2016-01-26T09:01:15","date_gmt":"2016-01-26T09:01:15","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1222"},"modified":"2024-07-01T07:36:58","modified_gmt":"2024-07-01T07:36:58","slug":"smooth-scroll-to-div-using-jquery","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/","title":{"rendered":"Smooth Scroll to Div using jQuery"},"content":{"rendered":"<p>Smooth scrolling using jQuery gives a better user interface to the web project. Smooth scroll reduces the users&#8217; efforts to scroll to reach a certain portion of the page. With smooth scrolling, the user can reach a specific portion of the page by clicking an anchor link or button.<\/p>\n<p>jQuery scrollTop method provides an easy way to <b>scroll to div<\/b> element. You can also add animation on page scroll using <b>jQuery animate()<\/b> method. In this tutorial, we will show you how to implement a smooth scroll to div using jQuery without manually scrolling.<\/p>\n<h2>Scroll to Div<\/h2>\n<p>The Scroll to Div functionality is very useful for single-page websites. It helps the user go to the specific page section without scrolling the page manually. In this example scroll to div code snippet, the user can jump to the specific portion of the page by clicking on the anchor link using jQuery.<\/p>\n<p>The following jQuery scroll to div script lands you to the specific portion of the page by clicking on the respective link.<\/p>\n<p><b>HTML Code:<\/b><br \/>\nSpecify the element ID with hash (#) prefix in the href attribute value of the anchor tag.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"top\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"#section1\"<\/span>&gt;<\/span>Go Section 1<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"#section2\"<\/span>&gt;<\/span>Go Section 2<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"section1\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"#top\"<\/span>&gt;<\/span>BackToTop<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Content goes here --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"section2\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"#top\"<\/span>&gt;<\/span>BackToTop<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Content goes here --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p><b>JavaScript Code:<\/b><br \/>\nThe Smooth scrolling functionality uses jQuery. So, include the jQuery library first.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>The following code automatically scrolls the page to specific div using jQuery.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\">$(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'a[href*=\\\\#]:not([href=\\\\#])'<\/span>).on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> target = $(<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.hash);\r\n        target = target.length ? target : $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'[name='<\/span> + <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.hash.substr(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) +<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">']'<\/span>);\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (target.length) {\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'html,body'<\/span>).animate({\r\n                scrollTop: target.offset().top\r\n            }, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1000<\/span>);\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>;\r\n        }\r\n    });\r\n});<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Auto Scroll to Div<\/h2>\n<p>The following code snippet helps to scroll automatically to specific div by class\/id on page load using jQuery.<\/p>\n<p><b>jQuery Code:<\/b><br \/>\nSpecify the ID or class (<code>.bottom-content<\/code>) of the HTML element where you want to scroll the page on load.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\">$(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> target = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.bottom-content'<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (target.length) {\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'html,body'<\/span>).animate({\r\n            scrollTop: target.offset().top\r\n        }, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1000<\/span>);\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>;\r\n    }\r\n});<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/social-popup-page-scroll-using-jquery-css\/\">Social Popup on Page Scroll using jQuery and CSS<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>Hope, this short and simple script helps you to add smooth scrolling feature to the website. It helps to implement scroll to an element within a minute. You can easily enhance this Auto Scroll to Div functionality as per your needs. To make the scroll-to-div feature more user-friendly, add <a href=\"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/\">BackToTop button using jQuery<\/a> on the web page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Smooth scrolling using jQuery gives a better user interface to the web project. Smooth scroll reduces the users&#8217; efforts to scroll to reach a certain portion of the page. With smooth scrolling, the user can <\/p>\n","protected":false},"author":1,"featured_media":5679,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[16,127,370,131],"class_list":["post-1222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-jquery","tag-pagescroll","tag-scroll","tag-smoothscroll","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Smooth Scroll to Div using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"Smooth scrolling using jQuery - Sort and simple script to implement smooth scroll to div using jQuery. Scroll automatically to specific div by class on page load using jQuery. Go to the specific portion of the page without manual scroll.\" \/>\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.codexworld.com\/smooth-scroll-to-div-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Smooth Scroll to Div using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Smooth scrolling using jQuery - Sort and simple script to implement smooth scroll to div using jQuery. Scroll automatically to specific div by class on page load using jQuery. Go to the specific portion of the page without manual scroll.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-26T09:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-01T07:36:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/01\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Smooth Scroll to Div using jQuery\",\"datePublished\":\"2016-01-26T09:01:15+00:00\",\"dateModified\":\"2024-07-01T07:36:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/\"},\"wordCount\":331,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png\",\"keywords\":[\"jQuery\",\"PageScroll\",\"Scroll\",\"SmoothScroll\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/\",\"name\":\"Smooth Scroll to Div using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png\",\"datePublished\":\"2016-01-26T09:01:15+00:00\",\"dateModified\":\"2024-07-01T07:36:58+00:00\",\"description\":\"Smooth scrolling using jQuery - Sort and simple script to implement smooth scroll to div using jQuery. Scroll automatically to specific div by class on page load using jQuery. Go to the specific portion of the page without manual scroll.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"smooth-scroll-to-div-in-html-using-jquery-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/smooth-scroll-to-div-using-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Smooth Scroll to Div using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Smooth Scroll to Div using jQuery - CodexWorld","description":"Smooth scrolling using jQuery - Sort and simple script to implement smooth scroll to div using jQuery. Scroll automatically to specific div by class on page load using jQuery. Go to the specific portion of the page without manual scroll.","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.codexworld.com\/smooth-scroll-to-div-using-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Smooth Scroll to Div using jQuery - CodexWorld","og_description":"Smooth scrolling using jQuery - Sort and simple script to implement smooth scroll to div using jQuery. Scroll automatically to specific div by class on page load using jQuery. Go to the specific portion of the page without manual scroll.","og_url":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-01-26T09:01:15+00:00","article_modified_time":"2024-07-01T07:36:58+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/01\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Smooth Scroll to Div using jQuery","datePublished":"2016-01-26T09:01:15+00:00","dateModified":"2024-07-01T07:36:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/"},"wordCount":331,"commentCount":7,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/01\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png","keywords":["jQuery","PageScroll","Scroll","SmoothScroll"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/","url":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/","name":"Smooth Scroll to Div using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/01\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png","datePublished":"2016-01-26T09:01:15+00:00","dateModified":"2024-07-01T07:36:58+00:00","description":"Smooth scrolling using jQuery - Sort and simple script to implement smooth scroll to div using jQuery. Scroll automatically to specific div by class on page load using jQuery. Go to the specific portion of the page without manual scroll.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/01\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/01\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png","width":1920,"height":1080,"caption":"smooth-scroll-to-div-in-html-using-jquery-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Smooth Scroll to Div using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/01\/smooth-scroll-to-div-in-html-using-jquery-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-jI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1222"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1222\/revisions"}],"predecessor-version":[{"id":4013,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1222\/revisions\/4013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5679"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}