smooth scroll to DIV after click on Submitt - javascript

I would like to smooth scroll to part called "result" after click on Submit button. But only result I get is just normal scroll, not smooth scroll.
Here is piece of HTML code:
<form action="index.php#result" method="post">
<div id="search-box">
<?php include 'submitt.php'; ?>
<input type="text" name="city" placeholder="Enter city name">
<input type="submit" name="SubmitButton" id="SubmitButton">
</div>
</form>
And here is the result section code:
<section id="result" class="container content-section text-center">
<div class="col-md-8 col-md-offset-2">
<p class="intro-text">Text.</p>
<?php include 'q.php'; ?>
</div>
</section>
A set following in JavaScript:
$("#SubmitButton").submit( function() {
$('html, body').animate({
scrollTop: $("#result").offset().top
}, 2000);
return false;
});
Can you please help how to get the smooth scrolling effect after click on Submit button?
I use Bootstrap framework there.
Many thanks.

see this example http://jsfiddle.net/kevalbhatt18/8tLdq/2129/
I updated your fiddle
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});

You can use Smooth Scrool Plugin: https://github.com/kswedberg/jquery-smooth-scroll

try this
$("#SubmitButton").submit( function() {
$('body').scrollTo('#result',{duration:2000});
return false;
});

Chris Coyier never lets me down. Here is his solution. Again, I can't stress enough that this isn't my solution, it belongs to a legend. Check out the origin by clicking his name above.
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});
In my opinion, this is a better solution.

Related

Why is window.scrollTo() not being called?

I'm using Bootstrap's Buttons plugin toggle state feature on a custom checkbox. When this button is toggled (on), a hidden element should appear near the top of the page and then the page should scroll to the top. When the button is toggled next (off), the element should disappear and the page should scroll to the top.
The hidden element is toggled when the button is toggled on and off but the scroll is not working.
Changing the data-toggle from 'buttons' to 'button' makes the scroll work but does not visibly toggle the button so that is no good.
I tried setting an onchange event for the checkbox itself but that also doesn't scroll.
It seems that Bootstrap's function for the onclick event is doing something that doesn't allow my onclick function to run properly. I failed at trying to understand it so far (I will keep trying).
Setting a timeout for the window.scrollTo() function makes it work. Why could this be? Is there a way to do this without the timeout?
<body>
<div class="container">
<div>
<h3>Toggle Header and Scroll To Top</h3><hr />
<h1 id="displayMe" class="d-none">Display Me</h1>
<div style="height: 100vh;"></div>
<div class="btn-group-toggle btn btn-success custom-control custom-switch" data-toggle="buttons" id="myButton">
<input type="checkbox" class="custom-control-input" id="myCheckbox">
<label class="custom-control-label" for="myCheckbox">Toggle and Scroll</label>
</div>
</div>
</div>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/twitter-bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#myButton").on("click", toggleAndScroll);
});
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
//setTimeout(function () {
window.scrollTo(0, 0);
//}, 100);
}
</script>
</body>
https://jsfiddle.net/ews9q50v/
(Uncomment the setTimeout lines to see it working)
I have no idea why it doesn't work. Bootstrap is messing something up.
But you can easily bypass it by moving scrollTo to the end of event loop using setTimeout(func, 0).
$("#myButton").on("click", toggleAndScroll);
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
setTimeout(function () {
window.scrollTo(0, 0);
}, 0);
}
demo
This seems to work for chrome but Firefox is having other issues:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
But since you are using jQuery something like this works in both Firefox and chrome:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
$("html, body").animate({ scrollTop: 0 }, "slow");
}
I'm not entirely sure what the issue is - probably something to do with the scroll height changing at the same time as scrollTo is called.

Move from a <div> to another <div> on scroll

I want my #logo-page div to move smoothly to #content div on scroll and also when clicked on FontAwesome icon. How do I do that using jQuery?
<div class="english-container" id="logo-page">
<div class="title">
<h1>Mean Design.</h1>
<img class="img-responsive" id="logo" src="MeanDesignLogo.png">
<h3>ui/ux • web design • graphic design • illustration</h3>
</div> <!-- title -->
<i class="fa fa-arrow-circle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="english-container" ></div>
I found a trick on how to do that at this page:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Here are two demos:
https://css-tricks.com/examples/SmoothPageScroll/
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
This is the example of the second demo:
$(document).ready(function(){
// Add smooth scrolling to all links
$("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
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Click Me to Smooth Scroll to Section 2 Below
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
You guys completely ignored his question. His question was he wants to scroll from one div to another div when on scroll not on click.
window.addEventListener('scroll', () => {
document.querySelector('#mission').scrollIntoView({
behavior: 'smooth'
});
})
This will help if you want to scroll to the div with the id name "mission"
You can use following code for scrolling smoothly to #logo-page div on click of .fa-arrow-circle-down:
$(".fa-arrow-circle-down").on("click", function(e){
$("html, body").animate({'scrollTop': $("#logo-page").offset().top }, 1000 );
});//click

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>

ScrollTo() in jquery

I have a code in which when a button is clicked the corresponding div is scrolling up along with the button. I want a code in which when a button is clicked the button must be in its respective position i.e, the buttons must be fixed, but the corresponding div must scroll up. The same should be applied to all the buttons and their respective divs
Here is my code in which I used scrollTo()
<div class="submit-buttons">
<input id="example1" type="submit" name="script" value="Sample1"/>
<input id="example2" type="submit" name="script" value="Sample2"/>
<input id="example3" type="submit" name="script" value="Sample3"/>
</div>
<div id="output1" style="margin-top:200px">This is output1</div>
<div id="output2" style="margin-top:600px">This is output2</div>
<div id="output3" style="margin-top:800px">This is output3</div>
<script>
$("#example1").click(function() {
$.scrollTo( '#output1', 800);
});
$("#example2").click(function() {
$.scrollTo( '#output2', 800);
});
$("#example3").click(function() {
$.scrollTo( '#output3', 800);
});
</script>
When I executed the above code the output1,2,3 are scrolling up but along with example1,2,3. I want a code in which the buttons must be fixed but the divs must move to the position below the buttons div
Make position:fixed for submit-buttons class.
add css and make changes according to your need.
.submit-buttons{
position:fixed;
top:10px;
width:100%;
}
I hope it helps you. http://jsfiddle.net/56P4T/
EDIT:
You can use this script(Ref: ek_'s answer).I hope it helps you.
$(document).ready(function (){
$("#example1").click(function() {
var val = $("#output1").offset().top - ($(".submit-buttons").height()+10);
$("html, body").animate({scrollTop: val}, 800);
});
$("#example2").click(function() {
var val = $("#output2").offset().top - ($(".submit-buttons").height()+10);
$("html, body").animate({scrollTop: val}, 800);
});
$("#example3").click(function() {
var val = $("#output3").offset().top - ($(".submit-buttons").height()+10);
$("html, body").animate({scrollTop: val}, 800);
});
});
Sumit Raghav gave you the right answer about fixed-positioning your buttons.
If you want your outputs to move just below the .submit-buttons div (in fact, it is your entire body which is moving) you may consider animating the scrollTop property, which is, I guess, what your scrollTo plug-in is doing:
$("#example1").click(function() {
// your get the position of #output1 with respect to the top of the document
// and you remove the height of the .submit-buttons div to scroll just below
var val = $("#output1").offset().top - $(".submit-buttons").height();
// animate the scrollTop property
$("html, body").animate({scrollTop: val}, 800);
});

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

Categories

Resources