I've setup my site to scroll past a mandatory header element by using a scrollTop to a certain div function. I specifically set it to scroll slow so that the user "knows the header is up there" but on subsequent pages, I'd rather it just start at that scrolled position.
I'm trying to use a simple if / else statement to grab the wordpress page (is_home) and set the animation to 1200, else set the animation to 0. I've even gone in and setup a custom field on the page of is_home and True. But it's still not working. Any ideas how to fix the if / else or suggestions for a better way to implement this?
if (is_home()) {
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
} else {
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
})
}
Well, if(is_home()) is a php statement from the WordPress API, which isn't available in JS. You could include different script calls based on this, but it's rather bad practice in my opinion.
Make sure the below is executed after your plugin, and jquery obviously. Good place might be after wp_footer()
<?php
if (is_home()) { ?>
<script>
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
</script>
<?php } else { ?>
<script>
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
});
</script>
<?php } ?>
You are combining php and JavaScript together. is_home() is a PHP statement
You need to rewrite your code as below:
<?php
if (is_home()) {
?>
<script type="text/javascript">
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
</script>
<?php
} else {
?>
<script type="text/javascript">
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
});
</script>
<?php
}
?>
Also use jQuery instead of $ to avoid conflict any other JavaScript libraries
Related
I'm doing scrolltop when the document is ready, that's work, but I'm giving the same script to a div to make the scroll manual. The problem is, if I use the auto-scroll, the manual scroll doesn't work.
Manual scroll
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
With:
<div id="flecha-inscripciones"><img src="https://residenciarucab.es/img/arrow-down.png" alt="Baja para ver" title="Baja para ver"></div>
Autoscroll:
$( document ).ready(function() {
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
You can see example here.
It only works the auto-scroll because the manual scroll has conflict.
Solved with queue: false; after the code.
Put below code at end of your, but before that include jquery.js file
$.noConflict();
jQuery(document).ready(function($){
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
Requirement : I want to redirect to a new page on click of a button and then I want to scroll to a particular section on the new page.
Issue :
This is how I'm currently redirecting
<div class="button know-more-btn">
<a href="/about-us#Who-We-Are" target="" class="btn-link btn-small">
KNOW MORE</a>
</div>
Now once it redirects on click of the button,I want it to to scroll to a particular section on the new page.
I'm currently trying to achieve this scenario with the below code :-
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
So on click of the know-more-btn,it should check the location.hash and scroll to the map-section div class on the new page.
But it only redirects and does not scroll to the desired section.
Please help me solve this issue.
Your code:
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
New code:
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
this jquery/javascript code will help you
function hashchanged(){
if(location.hash.substr(1)!='') $('html,body').animate({ scrollTop: ($('#'+location.hash.substr(1)).position().top-200) }, 'slow');
}
$(window).on('hashchange', function(e){
hashchanged();
});
hashchanged();
Any question im here.
You don't need jQuery for this, there's a built in method on every HTMLElement called scrollIntoView
Add the following script to your about-us page:
const map = document.querySelector('#Who-We-Are .map-section')
// simulates arriving at #Who-We-Are for the purpose of this example
window.location.hash = 'Who-We-Are';
addEventListener('DOMContentLoaded', event => {
if (window.location.hash === 'Who-We-Are') {
map.scrollIntoView({behavior: "smooth", block: "start"});
}
});
#Who-We-Are {
margin-top: 110vh;
}
.map-section {
margin-top: 20vh;
}
<section id="Who-We-Are">
<h2>Who We Are</h2>
<div class="map-section">Map</div>
</section>
this is my best solution which i had never seen this before. maybe this helpful for you.
below code for the page from that i want to redirect on click a link.
<div ><a onclick="myHash()"></a></div>
this is to redirect to a new page and send hash through url.
function myHash() {
$(document).ready(function () {
window.location.href="contact.html#link"
});
}
}
And On new page which i want open and scroll to the specific div.
<div id="link"></div>
And using url's hash to scroll specific div on new page
$(document).ready(function() {
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 1500)
}, 0);
}
});
I have used window.location.hash to jump from a link on a page to a div on another page. This works well. However, when the new page opens, it shows first the top of the page and scrolls then down to the div. The code I used for this is given below.
Question: how can I change the code so that the new page is loaded at the div immediately, without scrolling (or jumping) from the top of the page to the div?
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 1000)
}, 0);
}
else {
$('html, body').show();
}
I do it in this way because their is a timeout on the page during loading. When I do it in the normal way, thus without this code, it doesn't work because of the timeout. Any suggestions?
<script type="text/javascript">
var myVar;
function loadpage() {
myVar = setTimeout(showPage, 500);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
google.maps.event.trigger(map, 'resize')
map.setCenter(new google.maps.LatLng(50.849348, 4.7356652))
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 0)
}, 0);
}
else {
$('html, body').show();
}
}
</script>
I used jQuery to load a new page and scroll to a specific div. Everything worked perfectly but I have a small problem. Every time the link opens right before it scrolls there is a flashing.
Here is the code:
<a id="about1" href="Main.html#aboutSection" alt="About"> ABOUT </a></li>
here is the script:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
- 86}, 1000)
}, 0);
} else {
$('html, body').show();
} )};
I hope was clear enough.
Thanks guys.
P.S: I am new to web programming. This code is not mine.
You are seeing a blink because you are hiding all your contents with:
$('html, body').hide();
Is there a reason you want to hide the whole page? If not you can just try the following
$(document).ready(function() {
if (window.location.hash) {
$('html').animate({
scrollTop: $(window.location.hash).offset().top
- 86}, 1000);
}
});
Can anyone show me how to add smooth scrolling (to page top) to this jquery script?
Many thanks.
<script type="text/javascript">
$(function () {
$('#rbSubmit').formValidator({
scope: '#form_register',
onError: function () {
if ($('#input_2 input').hasClass('error-input')) {
$('#r2 div, #r2 input').css('background-color', '#C1272D').css('color', '#FFF');
$("#error-div").show();
} else {
$('#r2 div').css('background-color', '#2F2F2F');
$("#error-div").hide();
}
}
});
});
</script>
Try:
$('html, body').animate({ scrollTop: 0 }, 'slow');
hi Erik why dont u try jquery easing
jquery easing examples