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!
Related
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.
I have the following form in my Angular project (I added jquery import to the ts file):
<style>
body .ui-dialog .ui-dialog-content {
overflow-y:scroll; /* I made the scrollbar of modal visible */
}
</style>
<div id="createForm" class="ui-g-12">
<div class="ui-g form-group p-justify-between">
<!-- other stuff -->
</div>
</div>
I tried to use the following approach that I had used in my previous projects without any problem. I tried to trigger this method via a button but it does not make any sense:
scrollTop() {
//when I use this it works but scroll the body behind the popup instead of popup
$('html, body').animate({ scrollTop: $(document).height() }, 'slow');
//this does not work
$('html, body').animate({ scrollTop: $('#createForm').offset().top }, 'slow');
}
Is there anything that I should do for Angular?
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);
});
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>
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);
});