Smooth scroll to div id jQuery
JavascriptJqueryScrollJavascript Problem Overview
I've been trying to get a scroll to div id jquery code to work correctly. Based on another stack overflow question i tried the following
DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/
$('#myButton').click(function() {
$.scrollTo($('#myDiv'), 1000);
});
But it didn't work. It just snaps to the div. I also tried
$('#myButton').click(function(event) {
event.preventDefault();
$.scrollTo($('#myDiv'), 1000);
});
With no progress.
Javascript Solutions
Solution 1 - Javascript
You need to animate the html, body
DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
Solution 2 - Javascript
If you want to override standard href-id navigation on the page without changing the HTML markup for smooth scrolling, use this (example):
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
});
Solution 3 - Javascript
here is my 2 cents:
Javascript:
$('.scroll').click(function() {
$('body').animate({
scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
}, 1000);
});
Html:
<a class="scroll" target="contact">Contact</a>
and the target:
<h2 id="contact">Contact</h2>
Solution 4 - Javascript
Plain JS:
Can be done in plain JS if you use modern browsers.
document
.getElementById("range-calculator")
.scrollIntoView({ behavior: "smooth" });
Browser support is a bit issue, but modern browsers support it.
Solution 5 - Javascript
one example more:
HTML link:
<a href="#featured" class="scrollTo">Learn More</a>
JS:
$(".scrollTo").on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: ($(target).offset().top)
}, 2000);
});
HTML anchor:
<div id="featured">My content here</div>
Solution 6 - Javascript
This code will be useful for any internal link on the web
$("[href^='#']").click(function() {
id=$(this).attr("href")
$('html, body').animate({
scrollTop: $(id).offset().top
}, 2000);
});
Solution 7 - Javascript
My solution for both Vanilla JS and jQuery
Vanilla JS:
document
.querySelector("#myDiv")
.scrollIntoView({ behavior: "smooth" });
jQuery:
You need to animate the html, body
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
CSS:
html {
scroll-behavior: smooth;
}
Other properties of scroll-behavior
scroll-behavior: auto|smooth|initial|inherit;
Solution 8 - Javascript
Here's what I use:
<!-- jquery smooth scroll to id's -->
<script>
$(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
}, 500);
return false;
}
}
});
});
</script>
The beauty with this one is you can use an unlimited number of hash-links and corresponding ids without having to execute a new script for each.
If you’re using WordPress, insert the code in your theme’s footer.php
file right before the closing body tag </body>
.
If you have no access to the theme files, you can embed the code right inside the post/page editor (you must be editing the post in Text mode) or on a Text widget that will load up on all pages.
If you’re using any other CMS or just HTML, you can insert the code in a section that loads up on all pages right before the closing body tag </body>
.
If you need more details on this, check out my quick post here: jQuery smooth scroll to id
Hope that helps, and let me know if you have questions about it.
Solution 9 - Javascript
are you sure you are loading the jQuery scrollTo Plugin file?
you might be getting a object: method not found "scrollTo" error in the console.
the scrollTO method is not a native jquery method. to use it you need to include the jquery scroll To plugin file.
ref: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html
soln: add this in the head section.
<script src="\\path\to\the\jquery.scrollTo.js file"></script>
Solution 10 - Javascript
This script is a improvement of the script from Vector. I have made a little change to it. So this script works for every link with the class page-scroll in it.
At first without easing:
$("a.page-scroll").click(function() {
var targetDiv = $(this).attr('href');
$('html, body').animate({
scrollTop: $(targetDiv).offset().top
}, 1000);
});
For easing you will need Jquery UI:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Add this to the script:
'easeOutExpo'
Final
$("a.page-scroll").click(function() {
var targetDiv = $(this).attr('href');
$('html, body').animate({
scrollTop: $(targetDiv).offset().top
}, 1000, 'easeOutExpo');
});
All the easings you can find here: Cheat Sheet.
Solution 11 - Javascript
This is the simplest.Source-https://www.w3schools.com/jsref/met_element_scrollintoview.asp
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
Solution 12 - Javascript
Here is my solution to smooth scroll to div / anchor using jQuery in case you have a fixed header so that it doesn't scroll underneath it. Also it works if you link it from other page.
Just replace ".site-header" to div that contains your header.
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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 - headerheight)
}, 1000);
return false;
}
}
});
//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
var target = $('#'+location.href.split("#")[1]);
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - headerheight
}, 1);
return false;
}
}
});
Solution 13 - Javascript
You can do it by using the following simple jQuery code.
Tutorial, Demo, and Source code can be found from here - Smooth scroll to div using jQuery
JavaScript:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
});
});
HTML:
<a href="#section1">Go Section 1</a>
<div id="section1">
<!-- Content goes here -->
</div>
Solution 14 - Javascript
Here I tried this, that work great for me.
$('a[href*="#"]').on('click', function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
HTML:
<a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>
<div id="fast-food">
<p> Scroll Here... </p>
</div>
Solution 15 - Javascript
This works to me.
<div id="demo">
<h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#demo').offset().top
}, 'slow');
});
</script>
Thanks.