{"id":1964,"date":"2018-05-28T12:45:13","date_gmt":"2018-05-28T17:45:13","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1964"},"modified":"2018-05-28T12:45:13","modified_gmt":"2018-05-28T17:45:13","slug":"jquery-scroll-div","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/jquery-scroll-div\/","title":{"rendered":"jQuery: How to scroll to a div"},"content":{"rendered":"

When you first land on a page, it is possible to have the page scroll down to some remote div further down the page, using a little bit of jQuery. For example, if the remote div is called “remoteDiv”, this jQuery will automatically scroll down to the div when the page loads:<\/p>\n

$(\".remoteDiv\").ready(function() {\r\n    $('html,body').animate({\r\n        scrollTop: $(\".remoteDiv\").offset().top},\r\n        'slow');\r\n});<\/pre>\n
What this jQuery does is it selects the remoteDiv, and when the remoteDiv is loaded (.ready( )<\/code>), it selects the page body and animates down to the remoteDiv slowly.<\/p>\n
Once the user has been scrolled down to the remoteDiv, a similar jQuery code snippet can be used to scroll back up to the top “targetDiv”. This is based on clicking the remoteDiv. For example:<\/p>\n
$(\".remoteDiv\").click(function() {\r\n    $('html,body').animate({\r\n        scrollTop: $(\".targetDiv\").offset().top},\r\n        'slow');\r\n});<\/pre>\n
The two differences in this jQuery snippet are 1. it is triggered by clicking the remoteDiv with a click event and 2. it scrolls up to targetDiv.<\/p>\n
Here is the complete HTML code:<\/p>\n
<div class=\"targetDiv\">\r\n  <h2>This is the target div...<\/h2>\r\n<\/div>\r\n<div class=\"remoteDiv\" id='rd'>\r\n  <h2>Click this text! <br>This is the div that is way down \r\n  at the bottom of the page..<\/h2>\r\n<\/div><\/pre>\n
Here is the complete CSS:<\/p>\n
body {\r\n  background: #333;\r\n  padding: 10px;\r\n}\r\nh2 {\r\n  padding: 10px;\r\n}\r\n.targetDiv {\r\n  width: 100%;\r\n  height: 1500px;\r\n  background: #59A3C8;\r\n}\r\n.remoteDiv {\r\n  width: 100%;\r\n  height: 1000px;\r\n  background: #ccc;\r\n}<\/pre>\n
And here is the complete jQuery code:<\/p>\n
$(\".remoteDiv\").ready(function() {\r\n    $('html,body').animate({\r\n        scrollTop: $(\".remoteDiv\").offset().top},\r\n        'slow');\r\n});\r\n$(\".remoteDiv\").click(function() {\r\n    $('html,body').animate({\r\n        scrollTop: $(\".targetDiv\").offset().top},\r\n        'slow');\r\n});<\/pre>\n
I have a demo of this code on codepen:<\/p>\n
\nSee the Pen scroll to div by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
 <\/p>\n
For more information about each of these jQuery functions see:<\/p>\n
.ready()<\/a>
\n.click()<\/a>
\n.animate()<\/a>
\nscrollTop<\/a>
\n.offset()<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
When you first land on a page, it is possible to have the page scroll down to some remote div further down the page, using a little bit of jQuery. For example, if the remote div is called “remoteDiv”, this jQuery will automatically scroll down to the div when the page loads: $(“.remoteDiv”).ready(function() { $(‘html,body’).animate({ … Continue reading jQuery: How to scroll to a div<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,128],"tags":[10,45,123],"class_list":["post-1964","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-jquery","tag-css","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1964"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1964\/revisions"}],"predecessor-version":[{"id":1970,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1964\/revisions\/1970"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}