Hovering not properly / jump to section onclick wtihout anchor tag

Question

I'm making a jump tab for my portfolio website, but i'm stuck at this small feature.

<ul class="section">
   <li><span>home</span></li>
   <li><span>about</span></li>
   <li><span>project</span></li>
   <li><span>contact</span></li>
<ul>

#main .section {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    right: 30px;
    text-align: right;
    z-index: 10;
    margin-top: -100px;
}

#main .section li {
    list-style: none;
    background-color: #fff;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 30px;
    transform: scale(1);
    transition: all ease 0.5s;
}

#main .section li:hover {
    background-color: rgb(78, 78, 78);
    transform: scale(1.5);
}

#main .section li span {
    display: block;
    position: absolute;
    width: 100px;
    height: 20px;
    text-align: right;
    right: 25px;
    color: #fff;
    text-transform: uppercase;
    opacity: 0;
}

#main .section li span:hover {
    opacity: 1;
}

First, Text is only shown when I hover on span . Text wouldn't be shown when I hover on li which is a circle. Am I missing something here?

Second, I'm stuck at the actual function which it should jump to the section. I'm trying to use scrollIntoView method, but how could I target multiple elements in one function? This is what I've been doing so far, but it sure doesn't work.

let jumpbtn = document.querySelectorAll(".section li");

function jump(){
    for(var i = 0; i < jumpbtn.length; i++){
        jumpbtn[i].addEventListener("click", function(){
            this.id.scrollIntoView({behavior: "Smooth"});
        })
    }
}

Answer 1

Now hover the circle to view text also :)

try this

.section li:hover span {
    opacity: 1;
}

instead of

.section li span:hover {
    opacity: 1;
}

Then I passed the class of each li in onclick() event.

<li onclick="jump(this.className)" class="home">

then, get target element by this class name having target element's id by,

function jump(TarId){
   var target = document.getElementById(TarId);
   document.getElementById(TarId).scrollIntoView({behavior: "smooth"});
}

Live Demo

 function jump(TarId){ var target = document.getElementById(TarId); document.getElementById(TarId).scrollIntoView({behavior: "smooth"}); }

 .section { display: flex; flex-direction: column; position: fixed; top: calc(25% - 100px); right: 30px; text-align: right; z-index: 10; } .section li { list-style: none; background-color: #fff; position: relative; width: 20px; height: 20px; border-radius: 50%; margin-top: 25px; transform: scale(1); transition: all ease 0.5s; } .section li:hover { background-color: rgb(78, 78, 78); transform: scale(1.5); } .section li span { display: block; position: absolute; width: 100px; height: 20px; text-align: right; right: 25px; color: #fff; text-transform: uppercase; opacity: 0; } .section li:hover span { opacity: 1; } #main{ background:#111; position:relative; height:200px; } .content{ width:100%; margin-bottom:200px; } h1{ color:#00cc00; }

 <div id="main"> <ul class="section"> <li onclick="jump(this.className)" class="home"><span>home</span></li> <li onclick="jump(this.className)" class="about"><span>about</span></li> <li onclick="jump(this.className)" class="project"><span>project</span></li> <li onclick="jump(this.className)" class="contact"><span>contact</span></li> <ul> </div> <div class="content"> <div id="home"> <h1>Home Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> <div id="about"> <h1>about Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> <div id="project"> <h1>project Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> <div id="contact"> <h1>contact Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> </div>

Answer 2

Try below code snippet, it will helpful for you.

 function moveToDiv(target){ document.getElementById(target).scrollIntoView({ behavior: 'smooth' }); }

 .section{ display:block; } .section-area{ height: 300px; width: 100%; border: 10px solid red; background: gray; font-size: 30px; box-sizing:border-box; display:block; }

 <ul class="section"> <li onclick="moveToDiv('home')"><span>home</span></li> <li onclick="moveToDiv('about')"><span>about</span></li> <li onclick="moveToDiv('project')"><span>project</span></li> <li onclick="moveToDiv('contact')"><span>contact</span></li> </ul> <div class="section-area" id="home">Home</div> <div class="section-area" id="about">About</div> <div class="section-area" id="projects">Projects</div> <div class="section-area" id="contact">Contact</div>