SyntaxShelf

Scroll

2 snippets in HTML & CSS

Also written as scroll to

HCHTML & CSS

Anchor Links (Jump to Section)

HC · Links & Navigation
Syntax
<a href="#section-id">Jump</a>
...
<section id="section-id">Content</section>
Example
<nav>
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
</nav>

<section id="features">...</section>
<section id="pricing">...</section>

Note Use scroll-behavior: smooth in CSS for an animated scroll to anchor targets. The id must be unique on the page.

Overflow

HC · Box Model
Syntax
overflow: visible | hidden | scroll | auto | clip;
overflow-x: value;
overflow-y: value;
Example
.card-body {
  max-height: 200px;
  overflow-y: auto;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-scroll {
  overflow: clip;
}

Note overflow: auto only shows scrollbars when content actually overflows, while scroll always shows them. overflow: clip is like hidden but does not create a scroll container, preventing programmatic scrolling. Combine overflow: hidden with text-overflow: ellipsis for truncated text.

Frequently asked questions

How does HTML & CSS handle scroll?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Anchor Links (Jump to Section)" snippet in HTML & CSS uses `<a href="#section-id">Jump</a>`.
Which code does the HTML & CSS example use?
The "Anchor Links (Jump to Section)" snippet uses `<a href="#section-id">Jump</a>`, from the Links & Navigation section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "scroll"?
Besides "Anchor Links (Jump to Section)", this page also shows "Overflow".
Is there anything to watch out for?
Yes. For "Anchor Links (Jump to Section)": Use scroll-behavior: smooth in CSS for an animated scroll to anchor targets. The id must be unique on the page.

Browse all tasks by intent