One Page Website Template HTML CSS JS 2026

One-Page Website Advantages

Conversion

Single Focused Goal

No navigation away from the conversion path. Every scroll leads the visitor toward the CTA. One-pagers convert 37% higher than multi-page sites for single-offer products.

Mobile

Perfect for Mobile

Vertical scrolling is the native mobile interaction. One-page sites feel natural on phones — no navigation menus needed, no multi-page loading.

Speed

One HTTP Request

All content on a single page means one initial load. After that, scrolling is instant. PageSpeed scores are typically 5–10 points higher than multi-page equivalents.

Simple

Easier to Build and Maintain

One HTML file, one CSS file, one JS file. No routing, no multiple page templates to maintain. Perfect for portfolios, landing pages, and event sites.

Smooth Scroll Navigation — Complete Code

/* ── HTML nav with anchor links ── */
<nav>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

/* ── CSS smooth scroll ── */
html { scroll-behavior: smooth; }
section { scroll-margin-top: 70px; } /* offset for sticky nav */

/* ── JS: highlight active nav link on scroll ── */
const sections = document.querySelectorAll('section[id]');
const links = document.querySelectorAll('nav a');
new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      links.forEach(l => l.classList.remove('active'));
      document.querySelector(`nav a[href="#${e.target.id}"]`)
        ?.classList.add('active');
    }
  });
}, { threshold: 0.5 }).observe(sections);

One-Page Site Structure That Converts

Hero (0–20% scroll)

Headline + subtitle + primary CTA. Social proof bar (logos or stats). Hook the visitor in 3 seconds or they leave.

Problem / Features (20–45%)

What problem you solve. 3–4 feature cards with benefit-led copy. Product screenshot or demo if applicable.

Social Proof (45–65%)

3 testimonials with real names, photos, and company. Logo strip of recognisable clients. Review aggregate score.

Pricing / CTA (65–85%)

Clear offer with price. Primary CTA button. Trust statement below ("No credit card · Cancel anytime").

FAQ + Final CTA (85–100%)

5–7 common objections answered. Final CTA to catch visitors who scroll all the way down before deciding.

Get All 180+ Templates — $35 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

What is a one-page website template?

A one-page website template puts all content — hero, about, services, portfolio, testimonials, pricing, and contact — on a single HTML page with smooth-scroll anchor navigation. Visitors click nav links that scroll to sections rather than loading new pages. UIXDraft includes 30+ one-page templates in the 180+ template pack ($35 one-time).

How do I make a one-page website in HTML CSS JS?

1) Structure: use `

`, `

` etc in one HTML file. 2) Navigation: anchor links `href='#about'` in a sticky nav. 3) Smooth scroll: add `html { scroll-behavior: smooth; }` and `section { scroll-margin-top: 70px; }`. 4) Active link highlight: 10-line Intersection Observer JS that adds `.active` class to the current section's nav link.

Is a one-page website good for SEO?

One-page sites rank for their primary keyword but struggle with multiple keyword targets — all SEO value concentrates on one URL. Best practice: use a one-page site for single-product landing pages, portfolios, and events. Use multi-page sites when you need to rank for different keywords (different services, locations, or products). Combine: one-page homepage + separate blog posts for SEO.

How do I add smooth scrolling to a one-page HTML site?

CSS-only: add `html { scroll-behavior: smooth; }`. This works in all modern browsers. Add `scroll-margin-top: 70px` to sections to offset the sticky navigation height. For reduced-motion accessibility: wrap in `@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }` so users who prefer no animation get instant jumps.

What is the best one-page HTML template?

UIXDraft one-page templates include: SaaS landing page, portfolio, product, agency, and personal brand layouts. All include smooth-scroll navigation, Intersection Observer scroll-spy for active nav states, mobile responsive layouts, and schema.org markup. Part of the 180+ template pack at $35 one-time. Deploy free to Netlify in 30 seconds.