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);
});
});
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 found this code on jsfiddle and I am trying to get it to work on my page.
Here is the link:
http://jsfiddle.net/AfCdg/2/
Here is the code on JSFiddle:
<div data-role="page">
<div data-role="header" id="header">
Home
<h1>Logo</h1>
Buscar
</div>
<div data-role="content">
<div data-role="collapsible" id="searchForm" data-collapsed="true">
<h3>tester</h3>
<p>This is some text, cool</p>
</div><!-- end searchform-->
</div><!-- end content-->
</div><!-- end page-->
$(document).ready(function(){
$('#searchButton').live('click', function(event, ui) {
$("#searchForm").toggle();
});
});
and here is my code:
<div data-role="header" id="header">Refund Policy</div>
<div data-role="content">
<div data-role="collapsible" id="refund" data-collapsed="true">
and my javascript:
$(document).ready(function () {
$('#CollapseButton').live('click', function (event, ui) {
$("#refund").toggle();
setTimeout(function () {
var divPosition = $('#refund').offset();
$('html, body').animate({ scrollTop: divPosition.top }, "fast");
}, 200);
});
});
Currently the div does not start collapsed nor does it toggle when I click on the a href button. What am I missing?
Here are the only errors I receive in the Chrome console and neither looks relevant to me.
Your id of the button is searchButton
Change your code to the new id, or match them to your html either way:
$(document).ready(function () {
$('#searchButton').live('click', function (event, ui) {
$("#refund").toggle();
setTimeout(function () {
var divPosition = $('#refund').offset();
$('html, body').animate({ scrollTop: divPosition.top }, "fast");
}, 200);
});
});
<div data-role="header" id="header">
Home
<h1>Logo</h1>
Buscar
</div>
Try changing $('#searchButton').live('click', ... to $('#searchButton').on('click', ...
https://jsfiddle.net/o3mk90xq/
Also, note the check for whether or not the element is hidden when it first loads, in order to hide it initially.
if (!$("#refund").is(':hidden')) {
$("#refund").hide();
}
I'm new to jquery/javascript and have came across an issue.
I have a landing page that displays a large logo.
I am wanting a 3 second pause/delay before the automated scroll takes effect.
the code I am using at the moment is-
JS
$('html, body').animate({scrollTop: $('#hello').offset().top}, 4000);
HTML
<div class="fillwindow" style="background-image:url('#')">
<div class="landing__logo">
<img class="landing__logo-img" src="#">
</div>
</div>
<div class="fillwindow" id="hello" style="background-image:url('#')">
<div class="nav-header">
PORTFOLIO
</div>
<div class="nav-hitstate"></div>
</div>
As per the comments above:
$(document).ready(function() {
setTimeout(function() {
('html, body').animate({scrollTop: $('#hello').offset().top },4000);
}, 2000);})
A big thanks to - Sideroxylon for the help. His advice was the correct answer I was looking for.
$(document).ready(function() {
setTimeout(function() {
$('html, body').animate({
scrollTop: $('#hello').offset().top
},4000);
}, 2000);
});
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
I have a div that looks like this:
<div id="ProductPriceWrap" class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="">
<span class="Label">MSRP:</span>
<strike>$249.00</strike>
<span class="YouSave" style=""> (You save <span class="YouSaveAmount">$174.00</span>)</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em id="ProductPrice" class="ProductPrice VariationProductPrice" style="color: black; ">$75.00</em>
</div>
</div>
</div>
And I made this script to help customers see when the option chosen has changed the price:
$(document).ajaxSuccess(function(){
var currentPrice = $.trim($("#ProductPrice").text());
if(currentPrice == "%%GLOBAL_ProductPrice%%")
{
$("#ProductPrice").css('color','black');
$("#ProductPrice").removeClass("PriceChanged")
}
else
{
$("#ProductPrice").css('color','red');
$('html, body').animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
$("#ProductPriceWrap").animate({backgroundColor: "#ff0000" });
$("#ProductPriceWrap").animate({backgroundColor: "#ffffff" });
$( "#ProductPrice" ).addClass( "PriceChanged" );
}
});
</script>
I want to change the function that scrolls to #ProductPriceWrap so that it will only scroll to that element if they have scrolled passed it. Meaning don't scroll to that element if it is already visible. I am pretty new to JS and JQ, and don't even know where to start on this one. Any input is greatly appreciated! Thanks!
Seems you are looking for selector :visible and function .animate().
At the end you will have something like:
if ($("#ProductPriceWrap:not(:visible)")) {
$("html, body").animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
}