We Keep Coding

Move to top on click of button

I am using intro.js in my code to implement the walkthrough. I want to implement a sceanrio where on clicking the done button(.introjs-donebutton) the page should scroll to the top but with this code It is not happening. Can anyone please help me with this one?
//$('.col-new-four').attr('id','essentials');
const intro = introJs();
intro.setOptions({
steps:[
{
element:'#featured_apps_2_0',
intro:'welcome'
},
{
element:'#myTopnav',
intro:'Quickly access the apps and portals you need on and off the clock.'
},
{
element:'.slideshow-container',
intro:'This space features topics you care about the most.'
},
{
element:'.card',
intro:'Stay up-to-date on trending stories.'
},
{
element:'#stepextra',
intro:'View your recommended and favorite pages.'
},
{
element:'#step4',
intro:'Find promotional content, latest additions and more here.'
},
{
element:'#essentials2',
intro:'Learn about what’s trending with your favorite topics.'
},
{
element:'.col-new-7525',
intro:'Explore benefits, tools and new features available to you.'
}
]
})
$('.introjs-donebutton').click(function() {
$(window).scrollTop(0);
});
function callintro(){
intro.start();
console.log("called intro")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.2.2/intro.min.js"></script>

I assume that you want to scroll the client view page to top on clicking a button. if so you can use this code
HTML
<div class="button-parent">
<button type="button" class="button-to-top">Click Here</button>
</div>
jQuery
$(document).ready(function () {
$('.button-to-top').on('click', function () {
$('body').scrollTop(0);
});
});
Don't Forget to add jQuery cdns to your html header file. If it's not working share your html code. we will look forward

Using pure javascript, no framework
window.scrollTo({ top: 0, behavior: 'smooth' })

So i used this and It started running fine, the reason being the button was dynamically being created after the inital page load, so this should work
$(document).on("click", ".introjs-donebutton", function(){
$(document).scrollTop(0);
})

function upsideItem() {
$(document).ready(function(upsideItem) {
$('.button-to-top').on('click', function(upsideItem) {
console.log(button-to-top)
$('body').scrollTop(0);
});
});
}

How do I simplify the following code?

So I have a selection of images and would like a div to appear on('hover'). My current code is very bulky and manually adds that div for each of the images.
$("#TheNook").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#TheNook-cover").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#ManCave").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#ManCave-cover").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#AnchorsAweigh").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$("#AnchorsAweigh-cover").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$('#BatCave').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#BatCave-cover').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#CountryChic').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#CountryChic-cover').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#BohemianBungalow').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
$('#BohemianBungalow-cover').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
My new solution that I have tried is much more condensed, but I'm not entirely sure how to make it work. I'm new to declaring and using variables in JQuery so please help.
var cover = $('.theme-img:hover').attr("alt");
$('.theme-img').hover(function() {
$('#'+cover+'-cover').toggleClass('hidden');
});
Here is a JSFiddle: https://jsfiddle.net/w6pbp4Lz/2/
The first image should behave like the second.

You can use this code in order to achieve that:
JQUERY:
$('img.theme-img').hover(function() {
$(this).parent().children('div').toggleClass('hidden');
});
Here is your JSfiddle with my edits: https://jsfiddle.net/w6pbp4Lz/6/

Assuming they all have the class "theme-img" this might work
// "var cover = $('.theme-img:hover').attr("alt"); (not needed)
$('.theme-img').hover(function() {
$(this).toggleClass('hidden');
});

function toggleHover(srcElements, tarElement) {
srcElements.forEach(function(srcElement) {
srcElement.hover(function() {
tarElement.toggleClass('hidden');
});
});
}
call toggle hover with an array of the jQuery elements and the target jQuery element to toggle hidden. example
toggleHover([$('#TheNook'), $('#TheNook-cover')], $('#TheNook-cover'));
just an idea, might clean the code up a bit

can I make a function into a variable to reduce my code (JavaScript Code debug Please)

Hello I have been boggling my mind over and over again trying to simplify this java Script Code.
I am fairly new to JavaScript and I do not know where else to turn.
I am making a navigation that when I click on a button it will animate to transform:translateX(0); from transform:translateX(-98%); as a class.
I am also making it if you hover over the div .main-navigation it will slide back and forth accordingly. I have it where the mouseover will slide the navigation if its open to the close state but I cannot do so when it is closed to open. I am also trying to make it if the .home is active then the hover will not open or close the .home just the menu.
Any suggestions?
$(function(){
var navToggle = document.querySelectorAll('.nav-toggle');
var mainMenu = document.querySelectorAll('.main-navigation');
$(navToggle).on('click', function(){
if ($(mainMenu).hasClass('close')){
$(mainMenu).removeClass('close');
$(mainMenu).addClass('open');
}else{
$(mainMenu).addClass('close');
$(mainMenu).removeClass('open');
};
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
$(mainMenu).on('mouseenter', function(){
if ($(mainMenu).hasClass('close')){
$(mainMenu).removeClass('close');
$(mainMenu).addClass('open');
}
if ($(mainMenu).hasClass('open')){
$(mainMenu).removeClass('open');
$(mainMenu).addClass('close');
};
});
});
Sorry I created a Code Pen to show you a very close example of what I am trying to do and the behavior that is happening.
My CodePen Example

Never mind I figured it out, I went with JQuery and was able to achieve my goal. I ended up changing it to this.
$(function(){
homeAnimate();
menuAnimate();
menuAnimate2();
autoAnimateEnter();
autoAnimateExit();
function homeAnimate(){
$('.nav-toggle').click(function () {
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
}
function menuAnimate(){
$('.nav-toggle').click(function () {
if ($('.main-navigation').hasClass('close')) {
$('.main-navigation').addClass('close');
$('.main-navigation').toggleClass('open');
}
if ($('.main-navigation').hasClass('open')) {
$('.main-navigation').toggleClass('close');
$('.main-navigation').toggleClass('open');
}
});
}
function menuAnimate2(){
$('.nav-toggle-menu').click(function () {
if ($('.main-navigation').hasClass('open')) {
} else {
$('.main-navigation').addClass('open');
$('.main-navigation').removeClass('close');
}
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
}
function autoAnimateEnter(){
$('.main-navigation').mouseenter(function () {
if ($('.main-navigation').hasClass('close')) {
$('.main-navigation').removeClass('close');
$('.main-navigation').addClass('open');
} else {
// DO NOTHING
}
});
}
function autoAnimateExit(){
$('.main-navigation').mouseleave(function () {
if ($('.home').hasClass('toggleAnimate')) {
// DO NOTHING
} else {
$('.main-navigation').removeClass('open');
$('.main-navigation').addClass('close');
}
});
}
});
I'm not sure if this is the cleanest way in order to achieve my goal but it works and I'm happy.
Here is my code if anyone wants to check it out.
Code

Buttons change each other

Good evening!
I have a problem with conversion html code into new one, then go back by pressing new created button to the old one.
Problem is that when you press the button that one will convert into new one, but when I press again (new created code) it is not going back to the old one even when created code is correct (I mean id's).
There is my HTML code:
<div id="me_div">
me
</div>
And JavaScript:
$(function() {
$('#me').click(function() {
alert("Here I am!");
$("#me_div").html('noob');
document.getElementById("me_div").setAttribute("id", "noob_div");
});
$('#noob').click(function() {
alert("Im noob with JS.");
$("#noob_div").html('me');
document.getElementById("noob_div").setAttribute("id", "me_div");
});
});

Tom Rees answer will fix your problem, but consider rethinking your solution. Don't destroy and create new HTML every time a button is clicked and re-assign IDs! Why not show/hide?
http://jsfiddle.net/agmr2ytd/
$(function() {
$('#me').click(function() {
alert("Here I am!");
$("#me_div").hide();
$("#noob_div").show();
});
$('#noob').click(function() {
alert("Here I am!");
$("#noob_div").hide();
$("#me_div").show();
});
});

When that function executes, there is no #noob to bind to. You need to run the bind code every time the DOM is altered, eg.:
$(function() {
window.bindToMe = function() {
$('#me').click(function() {
alert("Here I am!");
$("#me_div").html('noob');
document.getElementById("me_div").setAttribute("id", "noob_div");
bindToNoob();
});
}
window.bindToNoob = function() {
$('#noob').click(function() {
alert("Im noob with JS.");
$("#noob_div").html('me');
document.getElementById("noob_div").setAttribute("id", "me_div");
bindToMe();
});
}
bindToMe();
});

display and hide text using hover in jquery

I'm trying to implement a simple functionality using the hover property in jQuery. When I hover on the div, some text must be displayed in the span element. That is pretty much the concept.
<script>
$(".logo").hover(
function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") },
function() { $("#span_hover").html(""); } );
</script>
<div class="logo"><img src="images/GMU_logo" height="100" width="150" /></div>
<span id="span_hover" style="position:fixed; bottom:5px; right:150px;"></span>
This code is not working! Can someone enlighten me?

Change your code like this way:
$(document).ready(function() {
$(".logo").hover(
function() {
$("#span_hover").html("Please visit http://www.gmu.edu for more information.");
},
function() {
$("#span_hover").html("");
}
);
});
With $(document).ready(...); your javascript code will wait for DOM and if it's completely loaded it will start.
http://jsfiddle.net/8as30y06/

Your script does actually work: http://jsfiddle.net/g2n403zs/ . Are you sure you are loading jquery before you are calling it's functions? What does the error console say?
$(".logo").hover(
function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") },
function() { $("#span_hover").html(""); } );

This seems to work ( you were missing a semicolon)
Here is fiddle:
jsFiddle
$(".logo").hover(function() {
$("#span_hover").html("Please visit http://www.gmu.edu for more information."); },
function() { $("#span_hover").html(""); });