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);
}
});
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'm using the code below and it's slowing down and stopping at a different div.
$("#btn").click(function() {
$('html, body').animate({
scrollTop: $("#footer_1").offset().top
},2000);
});
Even if I use this code:
$("#btn").click(function() {
$('html, body').animate({
scrollTop: $("#footer_1").offset().top
});
});
It goes to the div but there's an offset and when I click "btn" again then it goes to the complete div .
How can I make it work with a smooth scroll?
Here is the URL of my website (https://hwrmedia.com.au/).When I scroll down to the HWR Publications section and click on any post of that section, It goes to particular post on another page, hiding the content under the sticky navbar. For this I have used this js code:
$(document).ready(function(){
if (window.location.hash == "#moreInfo") {
$('html, body').animate({
scrollTop: $("#moreInfo").offset().top-100
}, 1000);
}
});
just add this jQuery Code
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top-100
}, 1000);
I'm trying to make a scrollTop to my div element, but not exactly where it is. I want
to go 20px before my div element. I think i can explain better showing my code for you:
HTML:
<div id="arrow-down">Click here and go to content!</div>
<div id="content">The content is here!</div>
JQuery:
I already have a code that is working fine, but i want to make it diference.
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 800);
});
});
This code takes me to the div#content, but i want to go 20px from the top of this!
Something like that:
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content" - 20px).offset().top
}, 800);
});
});
Well, i dont know if its look confused... I hope u guys can help me!
You can do this:
$('html, body').animate({
scrollTop: $("#content").offset().top - 20
}, 800);
$(document).ready(function() {
$('#arrow-down').click(function() {
$('body').animate({
scrollTop: $("#content").offset().top-20
}, 800);
});
});
try this