Scrolling to an Anchor using Transition/CSS3

by

You can use the scroll-behavior CSS property
(which is supported in all browsers except Internet Explorer and Safari):

a {
  display: inline-block;
  padding: 5px 7%;
  text-decoration: none;
}

nav, section {
  display: block;
  margin: 0 auto;
  text-align: center;
}

nav {
  width: 350px;
  padding: 5px;
}

section {
  width: 350px;
  height: 130px;
  overflow-y: scroll;
  border: 1px solid black;
  font-size: 0; 
  scroll-behavior: smooth;    /* <----- THE SECRET ---- */
}

section div{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 8vw;
}
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<section>
  <div id="page-1">1</div>
  <div id="page-2">2</div>
  <div id="page-3">3</div>
</section>

More Related Contents:

  1. Text in my heading should be top not bottom [closed]
  2. CSS indentation not working [closed]
  3. How do I disable the resizable property of a textarea?
  4. How do you keep parents of floated elements from collapsing? [duplicate]
  5. Why do browsers match CSS selectors from right to left?
  6. How to remove margin space around body or clear default css styles
  7. How to deal with page breaks when printing a large HTML table
  8. How do I change the color of radio buttons?
  9. How can I draw vertical text with CSS cross-browser?
  10. Is clearfix deprecated?
  11. CSS-Only Scrollable Table with fixed headers [duplicate]
  12. How to style SVG with external CSS?
  13. Pure CSS multi-level drop-down menu
  14. How to remove the gutter (spacing) between columns in Bootstrap?
  15. How to position two elements side by side using CSS
  16. How to make an HTML anchor tag (or link) look like a button?
  17. Protect image download
  18. Make link in table cell fill the entire row height
  19. Why is text wrapping around a floating element instead of going belows like another div?
  20. Hiding elements in responsive layout?
  21. How to make in CSS an overlay over an image?
  22. Fit website background image to screen size
  23. Same height column bootstrap 3 row responsive
  24. How to change the style of a ‘s label?
  25. CSS custom cursor doesn’t work in FF/Chrome
  26. Flexbox with fixed header and footer and scrollable content
  27. Prevent a centered layout from shifting its position when scrollbar appears
  28. How do I make a text input non-editable?
  29. Create wavy borders in CSS for top and bottom borders
  30. Prevent ligatures in Safari (Mavericks/iOS7) via CSS

Leave a Comment