Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 12, 2021 at 9:10 am #1320563
    Jasmer

    Hello!

    I have several Color Section Layout Elements on this site.

    On the second color section I have the animated Scroll Down Arrow

    When I select the Scroll Down Arrow it jumps to the next section. Good.

    When it jumps to the next section it changes the URL to https://example.com/#av_section_3

    The problem is, when a person visits the site again they may visit https://example.com/#av_section_3 instead of https://example.com and then they will start in the middle of the page. Not good.

    If someone unintentionally visits https://example.com/#av_section_3 what is the best way to redirect that link to https://example.com so they start at the top of the page in future visits?

    The problem is, if I do a redirect from https://example.com/#av_section_3 to https://example.com then then anytime someone clicks the Scroll Down Arrow it will just jump back to the top. Not good.

    Do you have any thoughts on how best to deal with this? Perhaps have a time trigger? So, the first time they click the arrow it will function as intended, but after 24 hours if they visit https://example.com/#av_section_3 it will then redirect to https://example.com but only the first time?

    Perplexing issue.

    Thanks,

    Jas

    September 13, 2021 at 8:03 am #1320646
    Ismael

    Hey Jasmer,

    Thank you for the inquiry.

    We could use the following script in the functions.php file to remove any hash on initial load.

    
function ava_custom_script_remove_hash() { 
?>
<script>
(function($) {
	$(document).ready(function() {
		var hash = location.hash.replace('#','');
		if(hash != '') {	
			location.hash = '';
		}
	});
})(jQuery);
<?php
}
add_action('wp_footer', 'ava_custom_script_remove_hash');

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings, and purge the cache after adding the code.

    Best regards,
    Ismael

    September 13, 2021 at 8:07 am #1320648
    Jasmer

    Thanks Ismael!

    Would this interfere when clicking on the down arrow? That has to function of course.

    Jas

    September 13, 2021 at 8:21 am #1320653
    Jasmer

    Hi Ismael,

    This didn’t work.

    I did the following in this order…

    1. I added the code to the functions.php of the child theme

    2. I went to:
    CSS file merging and compression > Disable
    Javascript file merging and compression > Disable
    Save All Changes.

    3. The site has cacheing disabled at the server level. SO no sever case to clear.

    4. I used a different browser that I’ve never used before so there is no browser cache that could have interfered.

    Would you please take a look?

    Please advise,

    Jas

    September 13, 2021 at 12:29 pm #1320716
    Ismael

    Hi,

    Thank you for the info.

    We adjusted the script a bit based on this thread (https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r/5298684#5298684).

    
/* Remove the down arrow #av_section_3 from https://example.com/#av_section_3 on first load */
function ava_custom_script_remove_hash() { 
?>
<script>
function removeHash () { 
    history.pushState("", document.title, window.location.pathname + window.location.search);
	setTimeout(function() {
		window.scrollTo(0, 0);
		console.log("scrolled");
	}, 500);
}
	
window.addEventListener("DOMContentLoaded", function() {
	console.log("remove hash");
	removeHash();
});
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_remove_hash', 999);

    It should be working properly now. Make sure to purge the cache or test the site on incognito mode.

    Best regards,
    Ismael

    September 13, 2021 at 9:50 pm #1320808
    Jasmer

    THANK YOU Ismael! Very helpful.

    Jas

    September 13, 2021 at 11:36 pm #1320812
    Jasmer

    Ismael,

    When you said “Please toggle or temporarily disable the Enfold > Performance > File Compression settings” did you mean permanently or temporarily? Can I turn them back on now?

    Thanks,

    Jas

    September 14, 2021 at 11:22 am #1320879
    Ismael

    Hi,

    Yes, you can turn on the file compression back now. We did not really need to disable them in this case, but it was just suggested just to make sure that the scripts and stylesheets are updated.

    Best regards,
    Ismael

    September 14, 2021 at 10:35 pm #1320960
    Jasmer

    Thanks for the help Ismael!

    Jas

    September 16, 2021 at 4:13 am #1321117
    Ismael

    Hi,

    No problem. Please let us know if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Scroll Down Arrow – Color Section Layout Element – URL Change’ is closed to new replies.