Develop Reference

blocking specific href tags in Javascript animation

I have two conflicting Javascript animations on my page. The first animation uses the href tag to transition between my index.html file and my contact.html. The second animation is a smooth scroll effect that is only for the #about and #services sections on the index.html document.
`// Loading animation between Home Page and Contact Page
window.onload = () => {
const transition_el = document.querySelector('.transition');
const anchors = document.querySelectorAll('a');
setTimeout(() => {
transition_el.classList.remove('is-active');
}, 1000);
for (let i = 0; i < anchors.length; i++) {
const anchor = anchors[i];
anchor.addEventListener('click', e => {
e.preventDefault();
let target = e.target.href;
transition_el.classList.add('is-active');
setTimeout(() =>{
window.location.href = target;
}, 1000);
})
}
}
// Scroll Animation for Services and About Sections
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e){
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior : "smooth"
});
});
});`
Is there anyway I could run an if else statement just inside the for loop so that when the #about or #services a tags are clicked that they don't continue running the page transition and just run the scroll effect?

Hide an element when scroll to specific class

I Used this JQuery code to have a sticky "Go to top" button:
//sticky back-to-top button
(function (t) {
t(window).bind("scroll", function () {
500 < t(this).scrollTop()
? t(".back-to-top").fadeIn(400)
: t(".back-to-top").fadeOut(400);
}),
t(".back-to-top").click(function () {
t("html, body").animate({ scrollTop: "0px" }, 500);
});
})(jQuery);
this code works correctly.
but i want when this sticky button reaches a specific class called "go-top", disappears. sorry for my bad english.

You can use interception observer so when the target element with said class is in view, it triggers the callback to hide the button.
Example: The code might not be exact but it is meant to point in the direction to follow.
let options = {
root: document.querySelector('.go-top'),
rootMargin: '0px',
threshold: 1.0
}
let prevRatio = 0.0;
let observer = new IntersectionObserver(callback, options);
let target = document.querySelector('#back-to-top-button');
observer.observe(target);
function handleIntersect(entries, observer) {
entries.forEach((entry) => {
if (entry.intersectionRatio > prevRatio) {
entry.target.style.display = "none";
} else {
entry.target.style.backgroundColor = "block";
}
prevRatio = entry.intersectionRatio;
});
}
Let me know how it goes...
You can switch the root to null but this makes the button disappear as soon as the element with the class is in the viewport

Styles revert back after being changed with JS code

I am trying to set the styles of a div when a button is clicked. The changes occur but then they instantly revert back to the existing styling.
View Demo
Full Source Code
document.body.addEventListener("click", (e) => {
if (e.target.classList.contains("js-multi-btn")) {
gameBoard.setGameMode('multi');
displayController.revealBoard();
}
});
document.body.addEventListener("click", (e) => {
if (e.target.classList.contains("js-single-btn")) {
gameBoard.setGameMode('single');
displayController.revealBoard();
}
});
function revealBoard() {
var btns = document.querySelector('.js-gameplay-btns');
btns.style.display = 'none'
var board = document.getElementById('js-board')
board.style.backgroundColor = 'white';
}
Multi Player Mode
Single Player Mode

https://jsfiddle.net/mplungjan/unjsp6tm/
Change to
<a href="" data-gm="multi" class="js-btn single-btn">
<a href="" data-gm="single" class="js-btn multi-btn">
then
document.querySelector(".js-gameplay-btns").addEventListener("click", (e) => {
const tgt = e.target.closest("a");
if (tgt && tgt.classList.contains("js-btn")) {
e.preventDefault()
gameBoard.setGameMode(tgt.dataset.gm);
displayController.revealBoard();
}
})

react-full-page prevents my page from opening in a certain ID like http://localhost:3000/#someIdWhereIWantThePageToBeOpened

I am using react-full-page and it's working almost fine but there are 2 problems
When I am going to some id by clicking in my anchor like <a href='#someId'>Go There</a> it is going but after scroll it is returning to where he was before the click
When opening link of the page with an id like http://localhost:3000/#someIdWhereIWantThePageToBeOpened it is staying in the top even when I have disabled scroll by disableScroll.on();
Any suggestions how to fix them?
Thanks ahead

const [fullTog, setFullTog] = useState('normal');
let hrefPosition = window
.location
.href
.substring(window.location.href.indexOf("#") + 1, window.location.href.length);
disableScroll.on();
useEffect(() => {
if (document.getElementById(hrefPosition) !== null) {
disableScroll.off();
let ind = 0;
let toDeGoTo = setInterval(function () {
if (ind === 10) {
clearInterval(toDeGoTo);
disableScroll.off();
};
document
.getElementById(hrefPosition)
.scrollIntoView({behavior: 'smooth'});
ind++;
console.log(ind);
}, 200);
} else {
console.log(document.getElementById(hrefPosition));
setTimeout(function () {
disableScroll.off();
}, 2000);
}
setTimeout(() => {
setFullTog('full-page');
disableScroll.off();
}, 2000);
}, [])

animation starts with delay

i have writen script which loads content from external php file. i'm using jquery1-9-1. my script works normal, except that moment when i'm clicking on button second time. there is delay for 0.5s before the animation starts. i think i know what is the problem and where is it. $("#header").animate({marginTop: "10px"... must execute just on the first click. after this clicked once, it must be deactivated. who knows how to solve it? don judge me so harsh and sorry my english
$(document).ready(function () {
var content = $("#content");
$("#main_menu a").click(function () {
var id = this.id;
$("#header").animate({
marginTop: "10px"
}, 500, function () {
$("#content").fadeOut(500, function () {
$("#content").load(id + ".php")
$("#content").fadeIn(500)
})
})
})
})

I have to ask, what is the point of caching content = $("#content") if you then refuse to use it and just call $("#content") repeatedly later?
Anyway, you need a variable to tell if it's the first run or not:
$(function () {
var content = $("#content"), isfirst = true;
$("#main_menu a").click(function () {
var id = this.id,
reveal = function() {
content.fadeOut(500, function () {
content.load(id + ".php")
content.fadeIn(500)
});
};
if( isfirst) $("#header").animate({marginTop: "10px"}, 500, reveal);
else reveal();
isfirst = false;
});
});

You need to track whether or not it has loaded, in that case. A simple variable and some closure should do it:
var isLoaded = false;
$("#main_menu a").click(function () {
var id = this.id;
if (!isLoaded) {
$("#header").animate({
marginTop: "10px"
}, 500);
isLoaded = true;
}
$("#content").fadeOut(500, function () {
$("#content").load(id + ".php")
$("#content").fadeIn(500)
})
});