How to scroll an HTML page to a given anchor

Way simpler:

var element_to_scroll_to = document.getElementById('anchorName2'); // Or: var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0]; // Or: var element_to_scroll_to = $('.my-element-class')[0]; // Basically `element_to_scroll_to` just have to be a reference // to any DOM element present on the page // Then: element_to_scroll_to.scrollIntoView(); 

You can use jQuery's .animate(), .offset() and scrollTop. Like

$(document.body).animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000); 

Example link: http://jsbin.com/unasi3/edit

If you don't want to animate, use .scrollTop() like:

$(document.body).scrollTop($('#anchorName2').offset().top); 

Or JavaScript's native location.hash like:

location.hash = '#' + anchorid; 

TL;DR
For anchor links like <a href="#section-2">, the browser will jump to the target automatically. To make it smooth, use CSS scroll-behavior. For JS control, prefer Element.scrollIntoView(); if you need exact pixel offsets (e.g., fixed header), compute the position and use window.scrollTo(). Use scroll-margin-top on the target to avoid header overlap, and respect prefers-reduced-motion for accessibility. (MDN Web Docs)

1) CSS-only smooth scrolling for anchors

/* Smooth scrolling for all in-page anchor jumps */ html { scroll-behavior: smooth; } 

Works for standard fragment navigation (#id) and for script-triggered scrolling when behavior is auto. See: MDN: scroll-behavior. (MDN Web Docs)

2) Programmatic scrolling to an element (modern)

document.querySelector('#section-2')?.scrollIntoView({ behavior: 'smooth', // or 'auto' block: 'start', // 'start' | 'center' | 'end' | 'nearest' inline: 'nearest' }); 

Element.scrollIntoView() supports options for vertical/horizontal alignment and smooth behavior. Docs: MDN: Element.scrollIntoView(). (MDN Web Docs)

Fixed header tip: if a sticky/fixed header hides the top of your section, add an offset on the target:

#section-2 { scroll-margin-top: 72px; } /* header height */ 

Docs: MDN: scroll-margin-top. Browser notes: Can I use. (MDN Web Docs)

3) Pixel-precise scrolling (compute + scrollTo)

const el = document.querySelector('#section-2'); const y = el.getBoundingClientRect().top + window.pageYOffset - 72; // header offset window.scrollTo({ top: y, behavior: 'smooth' // 'auto' for instant }); 

Docs: MDN: window.scrollTo(). (window.scroll() is effectively the same.) (MDN Web Docs)

4) Accessibility: honor “reduced motion”

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

Docs: MDN: prefers-reduced-motion. Support: Can I use. (MDN Web Docs)

Summary

• Use CSS scroll-behavior: smooth for anchor links. (MDN Web Docs)

• Prefer el.scrollIntoView({...}) for programmatic scrolling. (MDN Web Docs)

• For fixed headers, set scroll-margin-top on targets. (MDN Web Docs)

• When you need exact offsets, compute and call window.scrollTo({ top, behavior }). (MDN Web Docs)

• Respect prefers-reduced-motion. (MDN Web Docs)

The easiest way to to make the browser to scroll the page to a given anchor is to add *{scroll-behavior: smooth;} in your style.css file and in your HTML navigation use #NameOfTheSection.

*{scroll-behavior: smooth;}

<a href="#scroll-to">Click to Scroll</a> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <section id="scroll-to"> <p>it will scroll down to this section</p> </section>

Great solution by jAndy, but the smooth scroll seems to be having issues working in Firefox.

Writing it this way works in Firefox as well.

(function($) { $(document).ready(function() { $('html, body').animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000); }); })(jQuery); 

In 2018, you don't need jQuery for something simple like this. The built in scrollIntoView() method supports a "behavior" property to smoothly scroll to any element on the page. You can even update the browser URL with a hash to make it bookmarkable.

From this tutorial on scrolling HTML Bookmarks, here is a native way to add smooth scrolling to all anchor links on your page automatically:

let anchorlinks = document.querySelectorAll('a[href^="#"]')   for (let item of anchorlinks) { // relitere     item.addEventListener('click', (e)=> {         let hashval = item.getAttribute('href')         let target = document.querySelector(hashval)         target.scrollIntoView({             behavior: 'smooth',             block: 'start'         })         history.pushState(null, null, hashval)         e.preventDefault()     }) } 

Here is a pure JavaScript solution without jQuery. It was tested on Chrome and Internet Explorer, but not tested on iOS.

function ScrollTo(name) { ScrollToResolver(document.getElementById(name)); } function ScrollToResolver(elem) { var jump = parseInt(elem.getBoundingClientRect().top * .2); document.body.scrollTop += jump; document.documentElement.scrollTop += jump; if (!elem.lastjump || elem.lastjump > Math.abs(jump)) { elem.lastjump = Math.abs(jump); setTimeout(function() { ScrollToResolver(elem);}, "100"); } else { elem.lastjump = null; } } 

Demo: https://jsfiddle.net/jd7q25hg/12/

Smoothly scroll to the proper position

Get correct y coordinate and use window.scrollTo({top: y, behavior: 'smooth'})

const id = 'anchorName2'; const yourElement = document.getElementById(id); const y = yourElement.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({top: y, behavior: 'smooth'}); 

Most answers are unnecessarily complicated.

If you just want to jump to the target element, you don't need JavaScript:

# the link: <a href="#target">Click here to jump.</a> # target element: <div id="target">Any kind of element.</div> 

If you want to scroll to the target animatedly, please refer to 5hahiL's answer.

$(document).ready -> $("a[href^='#']").click -> $(document.body).animate scrollTop: $($(this).attr("href")).offset().top, 1000 

The solution from CSS-Tricks no longer works in jQuery 2.2.0. It will throw a selector error:

JavaScript runtime error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

I fixed it by changing the selector. The full snippet is this:

$(function() { $("a[href*='#']:not([href='#'])").click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); 

This works:

$('.scroll').on("click", function(e) { e.preventDefault(); var dest = $(this).attr("href"); $("html, body").animate({ 'scrollTop': $(dest).offset().top }, 2000); }); 

https://jsfiddle.net/68pnkfgd/

Just add the class 'scroll' to any links you wish to animate

This is a working script that will scroll the page to the anchor. To set it up, just give the anchor link an id that matches the name attribute of the anchor that you want to scroll to.

<script> jQuery(document).ready(function ($){ $('a').click(function (){ var id = $(this).attr('id'); console.log(id); if ( id == 'cet' || id == 'protein' ) { $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); } }); }); </script> 

I found an easy and simple jQuery solution on CSS-Tricks. That's the one I'm using now.

$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); 

A Vue.js 2 solution ... add a simple data property to simply force the update:

 const app = new Vue({ ... , updated: function() { this.$nextTick(function() { var uri = window.location.href var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1] if ( String(anchor).length > 0 && this.updater === 'page_load' ) { this.updater = "" // only on page-load ! location.href = "#"+String(anchor) } }) } }); app.updater = "page_load" /* Smooth scrolling in CSS - it works in HTML5 only */ html, body { scroll-behavior: smooth; } 

Assume we have an element with id 'hero'. A button anywhere on the page with id 'skip'.

in JS:

const btn = document.querySelector('#skip') let skipto = document.querySelector('#hero') skipto.scrollIntoView({ behavior: "smooth" })