Member Avatar for johan72

Hello every body

i am new in this forum. Any body share me or give me the website tutorials link how to make one page scroll drown website page. I want to get also more nice website template this kind of

  • 4 Contributors
  • 3 Replies
  • 338 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by ndeniche

Dani AI

Generated

A concise, practical note for and anyone else following this thread (comments from and about the broken link are valid; ’s example shows the “full‑screen slide” style):

Two common approaches make a single-page, scroll‑down site:

  • Simple anchor scrolling (hash links + scroll-behavior: smooth) for lightweight, SEO‑friendly builds.
  • Full‑page sections that snap or slide (CSS Scroll Snap for most cases; a small JS layer or a library for “one section per wheel” behavior).

Minimal structure and CSS to get a robust, accessible start:

<!-- HTML -->
<nav>
  <a href="#hero">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <section id="hero" class="section">Hero</section>
  <section id="about" class="section">About</section>
  <section id="contact" class="section">Contact</section>
</main>
/* CSS */
html { scroll-behavior: smooth; }
body { margin: 0; }
main { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; }
.section { height: 100vh; scroll-snap-align: start; display:flex; align-items:center; justify-content:center; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

Practical notes and troubleshooting

  • Keep each section reachable via an ID so deep links work and search engines index content.
  • Don’t “hijack” scrolling: aggressive JS that blocks native scrolling harms accessibility and trackpad users. Prefer CSS Scroll Snap or well‑tested libraries if a strict slide behavior is required.
  • Test keyboard navigation, screen readers, and mobile touch scrolling. Use prefers-reduced-motion to disable animations for users who opt out.
  • For templates and examples, search for “one‑page HTML template”, “fullpage”, or “CSS scroll‑snap example”; choose a template that exposes plain HTML/CSS so it’s easy to adapt and test.

This gives a stable, modern baseline; add progressive enhancements (parallax, transitions) only after confirming performance and accessibility.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

I am new in this forum. Any body share me or give me the website tutorials link how to make one page scroll drown website page. I want to get also more nice website template this kind of

If you want some help or want to learn something just post it. I don't click links.

Member Avatar for TonyG_cyprus

And anyway, your link just comes back to this page.

Member Avatar for ndeniche

You mean, like ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.