Develop Reference

How to scroll on click of a button to a certain element/div on the bottom of the page with jQuery?

I have tried different variations of this and it still does not work for me. I am trying to add an animation so that when I click in the button, it scrolls down to the certain element on the page.
Here's my code:
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("#nav-projects").click(function() {
$("html, body").animate({
scrollTop: $(
'html, body').get(0).scrollHeight
}, 2000);
});
});
</script>

An alternative way with CSS without jQuery ($('#yourelement').offset().top;) or Javascript would be:
html {
scroll-behavior: smooth;
}
Goto A
Goto B
Goto C
<hr>
<div id="A" style="height:500px;">Section A</div>
<div id="B" style="height:500px;">Section B</div>
<div id="C" style="height:500px;">Section C</div>

Try this:
<script>
$(document).ready(function() {
$("#nav-projects").click(function() {
$("html, body").animate({
scrollTop: $(
#id).height()
}, 2000);
});
});
</script>
Replace id with the id of the element to which you wish to scroll to and adjust the height accordingly.

Scroll to top of an element without using animate

HOw can I scroll to top of an element without using animate()? I googled, but all answers are with animate().
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
I just want to instantly go to the top of an element. In my case, the animate() is not necessary.

Use .scrollTop()
$("#button").click(function() {
$('html, body').scrollTop( $("#elementtoScrollToID").offset().top);
});
.dummy {
height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Test</button>
<div class="dummy"></div>
<div id="elementtoScrollToID">elementtoScrollToID</div>

You can do it just passing an anchor, pure HTML:
go to top
and you just add an <a name="top"></a> on the top of your website :)

You achieve the same affect without jQuery by using Window.scroll()
document.getElementById("button").onclick = function() {
window.scroll(0,document.getElementById("elementtoScrollToID").offsetTop);
};
<button id="button">Button</button>
<div id="elementtoScrollToID" style="margin: 800px 0;">
Scroll to here...
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Scrolling to a specific div using window.onload without adding to the web address

I am creating a page with 5 divs. I am using the following JavaScript code to smoothly move between them horizontaly :
$(function () {
$('ul.nav a').bind('click', function (event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
The Divs are something like this:
<div class="section white" id="section5">
<h2>Technologies</h2>
<p>
text
</p>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
I want to start with div # 3 on page load. The only solution that worked is the onload function:
window.onload = window.location.hash = 'section3';
but unfortunately when I load the page the url address is
http://localhost:51551/trial1/MainPage.aspx#section3
even when I click on another page anchors (div) and go there the URL is stuck to MainPage.aspx#section3.
I tried the solutions here: jQuery: how to scroll to certain anchor/div on page load?
But I think because I am already using Javascript to navigate the divs, its not working. I want to Either:
Remove the address #section3 part and keep using the onload
function
Even better navigate to section3 at start and have
the url change when I change the section
I am using Visual Studio 2010 Express, with ASP.NET, JS and C#. on Windows 8.1

First the following important distinction:
jQuery's #section1 selector looks for an HTML element with ID "section1", i.e. <div id="section1"></div>
The a href's #section1 URL hash looks for an anchor with name "section1", i.e. <a name="section1"></a>
This is a major difference that you need to check and understand. So you would normally need:
<a name="section1"></a>
<div id="section1">... your content here ...</div>
But since you are scrolling horizontally, I am going to do this without the <a name=...></a> part and deal with the hash in the window load handler, as I will explain further down.
Next is, I would avoid naming a JavaScript variable "event" as that looks an awful lot like a keyword, so try renaming it to ev.
If you want the click handler (the function you bind to the click event) to not follow the link clicked on, that function should return false:
$('ul.nav a').click(function (ev) {
var anchor = $(this);
$('.viewport').stop().animate({
scrollLeft: $($(anchor).attr('href')).offset().left
}, 1500,'easeInOutExpo');
// Add the section ID to the URL
window.location.hash = $(anchor).attr('href').substring(1);
ev.preventDefault();
return false;
});
Then, I'd suggest you to move the <ul class="nav">...</ul> outside of the section divs, so you don't have to repeat it inside your divs. Because you seem to be scrolling left/right, I assume you are floating your section divs next to each other in a wide container:
<div class="viewport">
<div class="container clearfix">
<div class="section" id="section1">
<h2>Technologies</h2>
<p>Text</p>
</div>
<div class="section" id="section2">
... content ...
</div>
<div class="section" id="section3">
... content ...
</div>
</div>
</div>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Using the following CSS (as an example for 3 600px divs floated next to each other inside a 1800px container, wrapped by a 600px viewport):
.viewport {
width: 600px;
overflow: hidden;
overflow-x: scroll;
}
.container {
width: 1800px;
}
.section {
float: left;
width: 600px;
}
For the clearfix class, refer to Bootstrap's clearfix.
Because you are scrolling horizontally, I think the <a name=...></a> things won't work, so I'd do an onload check for the hash, and scroll there when accessing the page with a preset hash. This has been done in the window load handler in the next snippet, together with starting in section 3 when there is no hash specified:
As for starting in section 3 on load, have this in your $(window).load() handler, for example:
$(window).load(function() {
var startSection = window.location.hash;
if (startSection == "") startSection = '#section3';
$('.viewport').scrollLeft($(startSection).offset().left);
window.location.hash = startSection;
});
Disclaimer: untested code! :) But please try these, and it should get you pretty close to what you are trying to achieve.
Hope this helps!

Why don't you scroll to that div on window load? And change bind with on, as of jQuery 1.7 .on() is the preferred method for attaching event handlers to a document
So your code should be something like this
$(document).ready( function(){
$('ul.nav a ').on('click ', function (event) {
var $anchor = $(this);
$('html, body ').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500, 'easeInOutExpo ');
event.preventDefault();
});
});
$(window).on('load', function () {
$('html, body').stop().animate({
scrollLeft: $('#section3').offset().left
}, 1500, 'easeInOutExpo ');
});

jquery scrollTo to work with a button

I'm having trouble getting a simple jquery code to work. I want a button to scroll the page down to another div.
The code is in here: http://jsfiddle.net/utm6d/
html:
<div class="jumbotron">
<div class="container text-center">
<h1>Scroll down!</h1>
<a type="button" id="helloclick" class="btn btn-default">scroll!</a>
</div>
</div>
<div class="container text-center" id="second">
<p> come here </p>
</div>
js:
$('#helloclick').click(function(){
$('html, body').ScrollTo("#second");
});

You need to use the scrollTop() method with an offset() of your target object.
$(function() {
$('#helloclick').click(function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $("#second").offset().top
}, 500);
});
});
EDIT: Code needed to be wrapped in $(function() {...});, to ensure #helloclick & #second are loaded before being executed.
See it working on JSFiddle

Try this:
$('#helloclick').click(function(){
$('html, body').animate({
scrollTop: $('#second').offset().top
}, 500);});
Working Demo

jQuery does not have .ScrollTo() method.
In your case, you need to use .scrollTop():
$('#helloclick').click(function(){
$('html,body').animate({ scrollTop: $('#second').offset().top });
});
Fiddle Demo

jquery prevent redirect until after animation

This code works perfectly except when you click on a link, The page is redirected before jquery has a change to visually animate the margin back to zero. Is there a way to prevent the redirect until after jquery animates the margin back to zero?
HTML
<div id="sidebar">
<div class="navigation">
<ul>
<li><img src="dbs/images/home.png" title="" width="40" height="38" />به عقب</li>
<li>فیلم ها</li>
<li>وزارتخانه ها ایران زنده</li>
<li>پرستش</li>
<li>جوانان</li>
<li>کودکان</li>
<li>پزوهش ها</li>
<li>دانشکده مسیح</li>
<li>زنان</li>
<li>کلیپ های سری</li>
</ul>
</div>
</div>
JS
$('.navigation a li').click(function () {
$('.slider').animate({
marginLeft: 0
}, 500);
});

.animate() takes a callback function like so:
$('.navigation a li').click(function () {
$('.slider').animate({
marginLeft: 0
}, 500,function() {
//thing to do when you animation is finished e.g.
location.href = 'http://redirect.to.url';
});
});
For complete documentation, check out the (extremely useful) jQuery docs:
http://api.jquery.com/animate/

Firstly, your HTML is invalid. Put the links inside the list items, not the other way around. Adjust your selector accordingly (.navigation li a).
Next, now that you're setting the event on the link rather than the list item, make your handler:
Prevent the default event
Add a callback to the animation, so that when the animation is over the page goes to this.getAttribute('href').
That should do it.

Stop the event propagation from li click handler.
$('.navigation a li').click(function (e) {
$('.slider').animate({
marginLeft: 0
}, 500);
e.stopPropagation();
});