Develop Reference

My script works only when when there is an alert function in the script

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);
});

Scroll div using fadeIn

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);
});

Scroll down button not working

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!

Scroll to div with JS

I have this problem where my nav bar wont scroll to the specified div. I've looked at other examples but I cant seem to resolve the problem.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<li><a id="link1" href="#top-page">Intro</a></li>
<li><a id="link2" href="#about">About</a></li>
<li><a id="link3" href="#contact">Contact</a></li>
<script>
$("#link1").click(function() {
$('html, body').animate({
scrollTop: $("#top-page").offset().top
}, 2000);
});
$("#link2").click(function() {
$('html, body').animate({
scrollTop: $("#about").offset().top
}, 2000);
});
$("#link3").click(function() {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 2000);
});
</script>
jsfiddle -
http://jsfiddle.net/4c0r2gzv/
Thanks in advance

Here is a script for smoothscroll, which I think is what you want:
$(function(){
$(".scroll").click(function(){
$("html,body").animate({scrollTop:$("#target").offset().top},"500");return false})
});
});
Replace .scroll with a class of your own or use .scroll. Whatever class you use must be applied to the anchor which is going to be clicked. #target sets the destination. Use your own id or use #target. #target must be applied to the destination. The number is the time taken for the animation to complete in milliseconds; change it to whatever you want.

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