I have a couple of hyperlinks on my page. A FAQ that users will read when they visit my help section.
Using Anchor links, I can make the page scroll towards the anchor and guide the users there.
Is there a way to make that scrolling smooth?
But notice that he's using a custom JavaScript library. Maybe jQuery offers somethings like this baked in?
This question is related to
javascript
jquery
scroll
hyperlink
anchor
If you have a simple button on the page to scroll down to a div and want the back button to work by jumping to top, just add this code:
$(window).on('hashchange', function(event) {
if (event.target.location.hash=="") {
window.scrollTo(0,0);
}
});
This could be extended to jump to different divs too, by reading the hash value, and scrolling like Joseph Silbers answer.
I did this for both "/xxxxx#asdf" and "#asdf" href anchors
$("a[href*=#]").on('click', function(event){
var href = $(this).attr("href");
if ( /(#.*)/.test(href) ){
var hash = href.match(/(#.*)/)[0];
var path = href.match(/([^#]*)/)[0];
if (window.location.pathname == path || path.length == 0){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
window.location.hash = hash;
}
}
});
Tested and Verified Code
<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
jQuery('html, body').animate({
scrollTop: jQuery(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
Well, the solution depends on the type of problem, I use the javascript animate method for the button click. and I use codes from bellow links for the navbar
https://css-tricks.com/snippets/jquery/smooth-scrolling/
$(document).ready(function () {
$(".js--scroll-to-plans").click(function () {
$("body,html").animate(
{
scrollTop: $(".js--section-plans").offset().top,
},
1000
);
return false;
});
$(".js--scroll-to-start").click(function () {
$("body,html").animate(
{
scrollTop: $(".js--section-features").offset().top,
},
1000
);
return false;
});
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
});
Modern browsers are a little faster these days. A setInterval might work. This function work well in Chrome and Firefox these days.(A little slow in safari, didn't bother with IE)
function smoothScroll(event) {
if (event.target.hash !== '') { //Check if tag is an anchor
event.preventDefault()
const hash = event.target.hash.replace("#", "")
const link = document.getElementsByName(hash)
//Find the where you want to scroll
const position = link[0].getBoundingClientRect().y
let top = 0
let smooth = setInterval(() => {
let leftover = position - top
if (top === position) {
clearInterval(smooth)
}
else if(position > top && leftover < 10) {
top += leftover
window.scrollTo(0, top)
}
else if(position > (top - 10)) {
top += 10
window.scrollTo(0, top)
}
}, 6)//6 milliseconds is the faster chrome runs setInterval
}
}
HTML
<a href="#target" class="smooth-scroll">
Link
</a>
<div id="target"></div>
or With absolute Full URL
<a href="https://somewebsite.com/#target" class="smooth-scroll">
Link
</a>
<div id="target"></div>
jQuery
$j(function() {
$j('a.smooth-scroll').click(function() {
if (
window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&& window.location.hostname == this.hostname
) {
var target = $j(this.hash);
target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$j('html,body').animate({
scrollTop: target.offset().top - 70
}, 1000);
return false;
}
}
});
});
The new hotness in CSS3. This is a lot easier than every method listed on this page and requires no Javascript. Just enter the below code into you css and all of a sudden links point to locations inside you own page will have a smooth scrolling animation.
html{scroll-behavior:smooth}
After that any links pointed towards a div will smoothly glide over to those sections.
<a href="#section">Section1</a>
Edit: For those confused about the above a tag. Basically it's a link that's clickable. You can then have another div tag somewhere in your web page like
<div classname="section">content</div>
In this regard the a link will be clickable and will go to whatever #section is, in this case it's our div we called section.
BTW, I spent hours trying to get this to work. Found the solution in some obscure comments section. It was buggy and wouldn't work in some tags. Didn't work in the body. It finally worked when I put it in html{} in the CSS file.
You can use window.scroll() with behavior: smooth and top set to the anchor tag's offset top which ensures that the anchor tag will be at the top of the viewport.
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', function (e) {
e.preventDefault();
var href = this.getAttribute("href");
var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
//gets Element with an id of the link's href
//or an anchor tag with a name attribute of the href of the link without the #
window.scroll({
top: elem.offsetTop,
left: 0,
behavior: 'smooth'
});
//if you want to add the hash to window.location.hash
//you will need to use setTimeout to prevent losing the smooth scrolling behavior
//the following code will work for that purpose
/*setTimeout(function(){
window.location.hash = this.hash;
}, 2000); */
});
});
Demo:
a, a:visited{_x000D_
color: blue;_x000D_
}_x000D_
_x000D_
section{_x000D_
margin: 500px 0px; _x000D_
text-align: center;_x000D_
}<a href="#section1">Section 1</a>_x000D_
<br/>_x000D_
<a href="#section2">Section 2</a>_x000D_
<br/>_x000D_
<a href="#section3">Section 3</a>_x000D_
<br/>_x000D_
<a href="#section4">Section 4</a>_x000D_
<section id="section1">_x000D_
<b style="font-size: 2em;">Section 1</b>_x000D_
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.<p/>_x000D_
<section>_x000D_
<section id="section2">_x000D_
<b style="font-size: 2em;">Section 2</b>_x000D_
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>_x000D_
<section>_x000D_
<section id="section3">_x000D_
<b style="font-size: 2em;">Section 3</b>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>_x000D_
<section>_x000D_
<a style="margin: 500px 0px; color: initial;" name="section4">_x000D_
<b style="font-size: 2em;">Section 4 <i>(this is an anchor tag, not a section)</i></b>_x000D_
</a>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>_x000D_
<script>_x000D_
document.querySelectorAll('a[href^="#"]').forEach(a => {_x000D_
a.addEventListener('click', function (e) {_x000D_
e.preventDefault();_x000D_
var href = this.getAttribute("href");_x000D_
var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");_x000D_
window.scroll({_x000D_
top: elem.offsetTop, _x000D_
left: 0, _x000D_
behavior: 'smooth' _x000D_
});_x000D_
});_x000D_
});_x000D_
</script>You can just set the CSS property scroll-behavior to smooth (which most modern browsers support) which obviates the need for Javascript.
html, body{_x000D_
scroll-behavior: smooth;_x000D_
}_x000D_
a, a:visited{_x000D_
color: blue;_x000D_
}_x000D_
_x000D_
section{_x000D_
margin: 500px 0px; _x000D_
text-align: center;_x000D_
}<a href="#section1">Section 1</a>_x000D_
<br/>_x000D_
<a href="#section2">Section 2</a>_x000D_
<br/>_x000D_
<a href="#section3">Section 3</a>_x000D_
<br/>_x000D_
<a href="#section4">Section 4</a>_x000D_
<section id="section1">_x000D_
<b style="font-size: 2em;">Section 1</b>_x000D_
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.<p/>_x000D_
<section>_x000D_
<section id="section2">_x000D_
<b style="font-size: 2em;">Section 2</b>_x000D_
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>_x000D_
<section>_x000D_
<section id="section3">_x000D_
<b style="font-size: 2em;">Section 3</b>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>_x000D_
<section>_x000D_
<a style="margin: 500px 0px; color: initial;" name="section4">_x000D_
<b style="font-size: 2em;">Section 4 <i>(this is an anchor tag, not a section)</i></b>_x000D_
</a>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea._x000D_
_x000D_
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram._x000D_
_x000D_
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his._x000D_
_x000D_
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat._x000D_
_x000D_
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>Adding this:
function () {
window.location.hash = href;
}
is somehow nullifying the vertical offset
top - 72
in Firefox and IE, ut not in Chrome. Basically, the page scrolls smoothly to the point at which it should stop based upon the offset, but then jumps down to where the page would go without the offset.
It does add the hash to the end of the url, but pressing back does not take you back to the top, it just removes the hash from the url and leaves the viewing window where it sits.
Here is the full js I am using:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top - 120
}, 500, function () {
window.location.hash = href;
});
return false;
});
The correct syntax is:
//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
$('html,body').animate({scrollTop:$(location.hash).offset().??top}, 500);
});
Simplifying: DRY
function smoothScrollingTo(target){
$('html,body').animate({scrollTop:$(target).offset().?top}, 500);
}
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
Explanation of href*=\\#:
* means it matches what contains # char. Thus only match anchors. For more about the meaning of this, see here\\ is because the # is a special char in css selector, so we have to escape it.I'm surprised no one has posted a native solution that also takes care of updating the browser location hash to match. Here it is:
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()
})
}
See tutorial: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml
For sites with sticky headers, scroll-padding-top CSS can be used to provide an offset.
There is native support for smooth scrolling on hash id scrolls.
html {
scroll-behavior: smooth;
}
You can take a look: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
$('a[href*=#]').click(function(event){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
event.preventDefault();
});
this worked perfect for me
thanks for sharing, Joseph Silber. Here your 2018 solution as ES6 with a minor change to keep the standard behavior (scroll to top):
document.querySelectorAll("a[href^=\"#\"]").forEach((anchor) => {
anchor.addEventListener("click", function (ev) {
ev.preventDefault();
const targetElement = document.querySelector(this.getAttribute("href"));
targetElement.scrollIntoView({
block: "start",
alignToTop: true,
behavior: "smooth"
});
});
});
This solution will also work for the following URLs, without breaking anchor links to different pages.
http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor
./index.html
./index.html#anchor
etc.
var $root = $('html, body');
$('a').on('click', function(event){
var hash = this.hash;
// Is the anchor on the same page?
if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
$root.animate({
scrollTop: $(hash).offset().top
}, 'normal', function() {
location.hash = hash;
});
return false;
}
});
I haven't tested this in all browsers, yet.
$(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;
}
}
});
});
Official: http://css-tricks.com/snippets/jquery/smooth-scrolling/
This will make it easy to allow jQuery to discern your target hash and know when and where to stop.
$('a[href*="#"]').click(function(e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
There are already a lot of good answers here - however they are all missing the fact that empty anchors have to be excluded. Otherwise those scripts generate JavaScript errors as soon as an empty anchor is clicked.
In my opinion the correct answer is like this:
$('a[href*=\\#]:not([href$=\\#])').click(function() {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
Only CSS
html {
scroll-behavior: smooth !important;
}
All you need to add only this. Now your internal links scrolling behavior will be smooth like a stream-flow.
Programmatically: Something extra and advanced
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 250, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.getElementById('el').scrollIntoView({
behavior: 'smooth'
})
Note: All latest browsers (Opera, Chrome, Firefox etc) supports this feature.
for detail understanding, read this article
Requires jquery and animates to anchor tag with the specified name instead of id, while adding the hash to browser url. Also fixes an error in most answers with jquery where the # sign is not prefixed with an escaping backslash. The back button, unfortunately, does not navigate back properly to previous hash links...
$('a[href*=\\#]').click(function (event)
{
let hashValue = $(this).attr('href');
let name = hashValue.substring(1);
let target = $('[name="' + name + '"]');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
event.preventDefault();
history.pushState(null, null, hashValue);
});
$("a").on("click", function(event){
//check the value of this.hash
if(this.hash !== ""){
event.preventDefault();
$("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);
//add hash to the current scroll position
window.location.hash = this.hash;
}
});
I suggest you to make this generic code :
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;});
You can see a very good article here : jquery-effet-smooth-scroll-defilement-fluide
Here is the solution I implemented for multiple links and anchors, for a smooth scroll:
http://www.adriantomic.se/development/jquery-localscroll-tutorial/ if you have your navigation links set up in a navigation div and declared with this structure:
<a href = "#destinationA">
and your corresponding anchor tag destinations as so:
<a id = "destinationA">
Then just load this into the head of the document:
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
// Scroll the whole document
$('#menuBox').localScroll({
target:'#content'
});
});
</script>
Thanks to @Adriantomic
Using JQuery:
$('a[href*=#]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
Never forget that offset() function is giving your element's position to document. So when you need scroll your element relative to its parent you should use this;
$('.a-parent-div').find('a').click(function(event){
event.preventDefault();
$('.scroll-div').animate({
scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
}, 500);
});
The key point is getting scrollTop of scroll-div and add it to scrollTop. If you won't do that position() function always gives you different position values.
The answer given works but disables outgoing links. Below a version with an added bonus ease out (swing) and respects outgoing links.
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
There is a css way of doing this using scroll-behavior. Add the following property.
scroll-behavior: smooth;
And that is it. No JS required.
a {_x000D_
display: inline-block;_x000D_
width: 50px;_x000D_
text-decoration: none;_x000D_
}_x000D_
nav, scroll-container {_x000D_
display: block;_x000D_
margin: 0 auto;_x000D_
text-align: center;_x000D_
}_x000D_
nav {_x000D_
width: 339px;_x000D_
padding: 5px;_x000D_
border: 1px solid black;_x000D_
}_x000D_
scroll-container {_x000D_
display: block;_x000D_
width: 350px;_x000D_
height: 200px;_x000D_
overflow-y: scroll;_x000D_
scroll-behavior: smooth;_x000D_
}_x000D_
scroll-page {_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
height: 100%;_x000D_
font-size: 5em;_x000D_
}<nav>_x000D_
<a href="#page-1">1</a>_x000D_
<a href="#page-2">2</a>_x000D_
<a href="#page-3">3</a>_x000D_
</nav>_x000D_
<scroll-container>_x000D_
<scroll-page id="page-1">1</scroll-page>_x000D_
<scroll-page id="page-2">2</scroll-page>_x000D_
<scroll-page id="page-3">3</scroll-page>_x000D_
</scroll-container>PS: please check the browser compatibility.
Source: Stackoverflow.com