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.
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);
});
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});
});
var pos = $(id).offset().top;
can be var pos = $id.offset().top;
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>
eval
here for?
$('html, body').animate
to Scroll
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.
.scrollIIntoView(
...)
) is the only one that worked for me on a non-scrolling page with targets loaded within a scrolling div (Chrome 102.0.5005.61 (Official Build) (arm64))
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>
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;
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);
});
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.
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>
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.
This is the simplest.Source-https://www.w3schools.com/jsref/met_element_scrollintoview.asp
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
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;
}
}
});
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>
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>
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.
Success story sharing
var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });
Explanation:.basics-content
is the inner div of the modal which I actually want to scroll to, withtarget
I provide the id number of the element ...