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
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 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);
});
The other jQuery scripts on the page are working fine, just not scrollTop, I could even get it to work on https://jsfiddle.net/ivolong/tyvusdte/ just not on my website, which is using JQuery 3.2.1.
In between script tags in the body I have:
$("#button1").click(function() {
$('html, body').animate({
scrollTop: $("#slide2").offset().top
}, 3000);
});
$("#button2").click(function() {
$('html, body').animate({
scrollTop: $("#slide1").offset().top
}, 3000);
});
Then I have:
<div class="slide" id="slide1">
<p id="title">Title</p>
<div id="specialText">
<p>Line 1.</p>
<p>Line 2.</p>
<p>Line 3.</p>
<p>Line 4.</p>
</div>
<button class="button" id="button1">↓</button>
</div>
<div class="slide" id="slide2">
<p id="title">Title</p>
<div id="text">
<p>Line 5.</p>
<p>Line 6.</p>
<p>Line 7.</p>
<p>Line 8.</p>
</div>
<button class="button" id="button2">↓</button>
</div>
But it doesn't respond when the button is clicked
It's because the javascript code is above the html code. At that point when the javascript code is interpreted, there are not buttons rendered which leads to no event handler being attached.
You can fix this by placing you javascript code under you html code, or like correctly in a comment below mentioned: by wrapping your code inside jQueries document.ready function which will look like:
$(document).ready(function() {
$("#button1").click(function() {
$('html, body').animate({
scrollTop: $("#slide2").offset().top
}, 3000);
});
$("#button2").click(function() {
$('html, body').animate({
scrollTop: $("#slide1").offset().top
}, 3000);
});
});
I use this code frequently and it makes my website slowly load.
$('#start').click(function() {
$('html,body').animate({
scrollTop : $('.scroll').offset().top
},1500);//end animate
});//end click
I used to change the #start and .scroll everytime. Any tips?
Wrap it in a function.
function foo(startElem, scrollElem) {
$(startElem).click(function() {
$('html,body').animate({
scrollTop : $(scrollElem).offset().top
},1500);//end animate
});
}
Then call it when you need it.
foo('#start', '.scroll');
Read more here.
Yeah it is with passing some parameters
Refer this example
function scrollCommon(startElem, scrollElem) {
$(startElem).click(function() {
$('html,body').animate({
scrollTop : $(scrollElem).offset().top
},1500);//end animate
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<ul>
<li>One</li>
<li>Two</li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="one">
<b>One</b><br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
</div>
<div class="two">
<b>Two</b>
<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
</div>
</div>
Besides the question wether this really has an Impact to your loading time, here another way to set this thing up, using event delegation:
$(document).on('click', '[data-scroll-target]', function(e){
$('html,body').animate({
scrollTop: $( this.dataset.scrollTarget ).offset().top
});
});
#start has now become obsolete, every node with a data-scroll-target-attribute will have this functionality
<div data-scroll-target=".scroll">#start</div>
...
<div class="scroll"> target </div>
https://jsfiddle.net/dsx8o04u/
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>