I have following code and what i am trying to do is when i click the button, content of div should be displayed from the initial of div.I am not good at js.For now when i click the button then div content doesnot shows untill i scroll the page . So how could i make it scroll automatically to the top of div content when i click the button?
//HTML
<button type="button" class="btn btn-info btn-block" id="show"></button>
<div class="container-fluid" id="detail" style="display:none;"></div>
//Js
$(document).ready(function(){
$("#show").click(function(){
$("#detail").fadeIn();
});
});
Try this
$(document).ready(function() {
$("#show").click(function() {
$("#detail").fadeIn();
$('html, body').animate({
scrollTop: $("#detail").offset().top - 100
}, 800);
});
});
You can add an element above the div element.
After then, use this function in the button click event.
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
Here is the example.
https://plnkr.co/edit/kcs8UZaBcaegwTSSeThM?p=preview
You can use jQuery ScrollTo plugin.
http://api.jquery.com/scrollTop/
$('#myButton').click(function() {
//optionally remove the 500 (which is time in milliseconds) of the
//scrolling animation to remove the animation and make it instant
$.scrollTo($('#myDiv'), 500);
});
Related
My script works only when i have an alert function in it.
Well I want to scroll my div to bottom . I researched but yet, my script does not execute without an alert function
$(document).ready(function() {
$("#display-message").animate({ scrollTop: $('#display-message').prop("scrollHeight")}, 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat-log">
<div id="display-message">
</div>
</div>
Actually you need to animate body like this:
$(document).ready(function() {
$('html, body').animate({
scrollTop: $("#display-message").offset().top
}, 2000);
});
I want a simple scroll down button and it will go down to the section.
I have tried literally every damn button and jQuery and Javascript there is to do this, but it just wont happen.
It links it to the section and moves there but it all happens instant, there is no slow animation, almost like it does not recognize the Javascript or jQuery.
This is my div where the button is in.
This is the jquery i am currently using, I have it right under the button and it is between <script> tags.
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: scrolled
});
});
});
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
<button id='downClick'>Go Down</button>
</div>
The Code Snippet works as I want it to, but in laravel it just teleports instantly to the specified section.
Can someone please tell me why it doesn't do the animation?
Try replacing: scrollTop: scrolled with scrollTop: $(document).height()
NOTE: Note the use of $(window).load (when images are loaded...which occupy height) rather than document.ready.
Ref: jQuery Scroll To bottom of the page
UPDATE: To scroll to a specific section replace scrollTop: $(document).height() To $("#my_section_to_scroll_to").offset().top
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: $("#my_section_to_scroll_to").offset().top
});
});
});
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
<button id='downClick'>Go Down</button>
</div>
<div id="my_section_to_scroll_to" style="margin-top:300px;border:solid 1px">
my_section_to_scroll_to
</div>
You're not specifying the speed of the animation, by default it's fast, try this out :
var scrolled = 0;
$(document).ready(function() {
$("#downClick").on("click" ,function() {
// I assume scrolled is the height of the element you want to scroll to
scrolled = scrolled + 100;
$('body,html').animate({ scrollTop: scrolled }, 800);
});
});
If you want to the bottom of the document you could use this.
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled = $(document).height()
$("html, body").animate({
scrollTop: scrolled
});
});
});
But you could use this to get down one element height.. or div or if you use + you can scroll multiple div height!
I have a collapsible div in my project that once the user clicks on it and it expands, I need it the computer to scroll down so the user knows the text is there. The expansion of the div works but since it tries to expand automatically (before the div expands) and because this is the bottom of the page (prior to the Div opening) it will not scroll. So what I want to do is put in a 3 second delay in to my Javascript so it will not try to do that until the Div is open. I cannot get it to work. This is the code I currently have:
<script language="Javascript">
function scrollRefund() {
var divPosition = $('#refund').offset();
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 1);
}
</script>
<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>
<div id="refund" class="collapse">
The second argument for setTimeout is in milliseconds. Try 3000 instead of 1.
<script language="Javascript">
function scrollRefund() {
var divPosition = $('#refund').offset();
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 3000);
}
</script>
<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>
<div id="refund" class="collapse">
Try to use
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 3000);
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);
});
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