Presets

Target Element

Scroll Margin

Scroll Behavior

Scroll Padding (Container)

Scroll Snap Options

Actions

Live Preview

Click navigation links to see scroll behavior with current settings

Fixed Header80px offset

Introduction

Welcome to our documentation. This section provides an overview of the key concepts.

Section content area

Getting Started

Learn how to set up your development environment and begin building.

Section content area

Configuration

Detailed configuration options for customizing your setup.

Section content area

API Reference

Complete API documentation with examples and use cases.

Section content area

Best Practices

Tips and recommendations for optimal performance and maintainability.

Section content area

Scroll Margin Comparison

Target
0px
Target
40px
Target
80px
Target
120px
Target
160px

Generated CSS

Minimal
section {
  scroll-margin: 80px 0 0;
}

html {
  scroll-behavior: smooth;
}
With Comments
/* Scroll Margin for Anchored Navigation */
/* Prevents content from being hidden behind fixed headers */

section {
  scroll-margin: 80px 0 0;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

Code Examples

Basic Scroll Margin

/* Offset for fixed navbar */
section {
  scroll-margin-top: 80px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

With CSS Variables

:root {
  --header-height: 60px;
  --scroll-offset: 20px;
}

section,
[id] {
  scroll-margin-top: calc(
    var(--header-height) +
    var(--scroll-offset)
  );
}

Responsive Scroll Margin

section {
  scroll-margin-top: 60px;
}

@media (min-width: 768px) {
  section {
    scroll-margin-top: 80px;
  }
}

@media (min-width: 1024px) {
  section {
    scroll-margin-top: 100px;
  }
}

All Anchor Targets

/* Target any element with id */
[id] {
  scroll-margin-top: 80px;
}

/* Or specific heading levels */
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 80px;
}

/* Fragment target styling */
:target {
  scroll-margin-top: 80px;
  animation: highlight 2s;
}

Scroll Padding (Container)

/* Alternative: padding on container */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Useful when you can't modify
   individual elements */

Scroll Snap with Margin

/* Container */
.scroll-container {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 80px;
  overflow-y: scroll;
}

/* Children */
.scroll-container section {
  scroll-snap-align: start;
  scroll-margin-top: 80px;
}

CSS Properties Reference

PropertyDescriptionValues
scroll-marginMargin around scroll snap area<length> (px, rem, em, vh, etc.)
scroll-margin-topTop scroll margin<length>
scroll-paddingPadding on scroll container<length> | auto
scroll-behaviorScrolling animationauto | smooth
scroll-snap-typeSnap strictness and axisnone | x | y | both + mandatory | proximity
scroll-snap-alignSnap alignmentstart | center | end | none

Browser Support

PropertyChromeFirefoxSafariEdge
scroll-margin69+68+14.1+79+
scroll-padding69+68+14.1+79+
scroll-behavior61+36+15.4+79+
scroll-snap-*69+68+11+79+

Common Use Cases

Fixed Header Offset

Most common use - prevent anchored content from being hidden behind fixed navigation headers.

Table of Contents Navigation

Documentation sites with sticky TOC that need proper scroll positioning for sections.

Single Page Applications

SPAs with smooth scrolling between sections need proper offset for fixed UI elements.

Skip Links (Accessibility)

Ensure skip-to-content links position content properly below fixed headers.

Best Practices

  • Use CSS variables for header height to keep scroll-margin in sync with actual header size
  • Add extra padding (10-20px) beyond header height for breathing room
  • Apply to all [id] elements to catch all potential anchor targets
  • Test with scroll-behavior: smooth to verify smooth scrolling works correctly
  • Consider responsive values if header height changes at different breakpoints
  • Use scroll-padding on html as an alternative when you cant modify individual elements
  • Combine with :target pseudo-class for highlighting active sections

Rate this tool