{"componentChunkName":"component---src-components-posts-layout-index-js","path":"/scrollTo/","webpackCompilationHash":"6fd724ef40842b910a04","result":{"data":{"mdx":{"id":"6998e50a-a75f-50a4-8ee4-14bfe511d96d","timeToRead":2,"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Helpful Snippets: scrollTo()\",\n  \"date\": \"2019-04-15\",\n  \"excerpt\": \"This post is part of a series I am calling \\\"Helpful Snippets.\\\" A lot of the times as Web Developers we learn on the fly, googling around for a solution or cobbling together one on your own. My goal is to share solutions I find through that process in hopes I can save someone a few minutes of pain.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"This post is part of a series I am calling \\\"Helpful Snippets.\\\" A lot of the times as Web Developers we learn on the fly, googling around for a solution or cobbling together one on your own. My goal is to share solutions I find through that process in hopes I can save someone a few minutes of pain.\"), mdx(\"br\", null), mdx(\"h2\", null, \"Scroll down on click\"), mdx(\"p\", null, \"I wanted to share a solution for scrolling the window down to a certain element on click. I discovered this solution while building a passion project called UI Gems.\"), mdx(\"br\", null), mdx(\"p\", null, \"Here's a screenshot to help visualize what my end goal was:\"), mdx(\"img\", {\n    \"style\": {\n      \"margin\": \"0px 0px 20px\"\n    },\n    \"src\": \"https://drive.google.com/uc?id=1U_5xsn_hCAlBJulUEbs6Ib0-yzgYoKO2\"\n  }), mdx(\"p\", null, \"See that link that says \\\"Get Inspired?\\\" When a user clicks that, the page or \\\"window\\\" should scroll down so much so that the Filter Bar (Sign in, Hero, Pricing etc.) is at the very top of the window.\"), mdx(\"img\", {\n    \"style\": {\n      \"margin\": \"16px 0px\"\n    },\n    \"src\": \"https://drive.google.com/uc?id=1bmj3w3O57uHQBDdprGBv2z0QYOkhtr-H\"\n  }), mdx(\"p\", null, \"My first instinct was to grab the native \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, \"scrollIntoView()\"), \" function, which has helped me achieve this sort of functionality before. However, there is a caveat to that function which is: What if the target element is already in view?\"), mdx(\"p\", null, \"What happens is, well nothing. See, normally something like the below works quite well:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"handleClick = () => {\\n  const el = document.getElementById('target')\\n  el.scrollIntoView()\\n}\\n\")), mdx(\"p\", null, \"However, if the element is already in view, the browser knows this and so does not scroll the window at all.\"), mdx(\"br\", null), mdx(\"p\", null, \"So what to do now? Let's see if there is another scroll method that may work for our purposes. This hunt naturally leads us to the \", mdx(\"strong\", null, \"scrollTo\"), \" function. Another function which is native to Javascript but is a bit more customizable.\"), mdx(\"br\", null), mdx(\"h2\", null, \"scrollTo()\"), mdx(\"p\", null, \"The way scrollTo works is pretty easy to understand, a brief look at the \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, \"MDN docs\"), \" should give you a general idea of how it works. We'll have to customize it a bit though to get it to work for our purposes. First we'll determine what our \\\"scroll target\\\" is. In this case, it is the top of what we're calling the filterBar.\"), mdx(\"br\", null), mdx(\"p\", null, \"This guy:\"), mdx(\"img\", {\n    \"style\": {\n      \"margin\": \"0px 0px 20px\"\n    },\n    \"src\": \"https://drive.google.com/uc?id=1ajtn2M6_lqhCIThptX-Zoxwx-saLCB4a\"\n  }), mdx(\"br\", null), mdx(\"p\", null, \"Let's first create a variable for that element:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const el = document.getElementById('target')\\n\")), mdx(\"br\", null), mdx(\"p\", null, \"The above also requires we give the actual element an id of target:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"<FilterBar id=\\\"target\\\" />\\n\")), mdx(\"br\", null), mdx(\"p\", null, \"Next, we need to know the target's location in the DOM, in pixels. Luckily we have another handy method which we can use to grab that.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const target = el.getBoundingClientRect().top\\n\")), mdx(\"br\", null), mdx(\"p\", null, \"The \", mdx(\"strong\", null, \".top\"), \" method reads the relative distance of the current element relative to the topmost part of the window.\"), mdx(\"br\", null), mdx(\"p\", null, \"So now that we have the pixel value of our target, all we need to do is scroll the window down to that location. Before we do that, there's one last consideration. What if the user has scrolled the window down, say 20px? Well our target variable will now be 20px closer, thus changing our target's value.\"), mdx(\"br\", null), mdx(\"p\", null, \"To account for this, we'll want to know how many pixels the user has scrolled down. We do this be using \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, \"window.scrollY\"), \". Now we simply add those values together to get our \", mdx(\"strong\", null, \"endPosition\"), \", which will be our final target value.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"handleClick = () => {\\n  const el = document.getElementById('target')\\n  const target = el.getBoundingClientRect().top\\n  const endPosition = target + window.scrollY\\n\\n  return window.scrollTo({\\n    top: endPosition,\\n    left: 0,\\n    behavior: 'smooth',\\n  })\\n}\\n\")), mdx(\"br\", null), mdx(\"p\", null, \"Thanks for reading!\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Helpful Snippets: scrollTo()","date":"April 15, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"6998e50a-a75f-50a4-8ee4-14bfe511d96d","previous":{"id":"8c517f71-bd36-564e-8e65-912f9f3c619c","fields":{"slug":"/what-music-can-teach-us-about-design/"},"frontmatter":{"title":"What Music Can Teach Us About Design"}},"next":{"id":"c96b71a9-1eb5-5b69-beef-a61932a5b2a0","fields":{"slug":"/theming-contentful/"},"frontmatter":{"title":"Theming with Contentful"}}}}}