Problem with side scroller href with CSS and html

user_17743981 0
Viewed 59

I've been practicing code trying to make website with HTML and CSS, and I had an idea for a menu that you can scroll sideways. You've probably seen them, I have everything down but the href tags. Once you click on the letters, its supposed to jump to a certain "menuItem". click a, you go to b, b to c, c back to a. The problem is that it only works once, and after that, it stops jumping. So I can press a, it'll go to b, and then stop working when I press b to go to c. Please help, thanks.

.portfolioWrapper .portScroller {
  overflow: auto;
  white-space: nowrap;
  height: 100%;
}

.portfolioWrapper .portScroller li.a {
  width: 100%;
  background-color: blue;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.b {
  width: 100%;
  background-color: red;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.c {
  width: 100%;
  background-color: green;
  display: inline-block;
  text-align: center;
}

li.a a.oneAnch {
  text-align: right;
}

li.a a.twoAnch {
  text-align: right;
}

li.a a.threeAnch {
  text-align: right;
}
<div class="portfolioWrapper">
  <a id="portAnchor"></a>
  <div class="portScroller">
    <li class="a"><a href="#prj2" class="one">a</a></li>
    <a id="prj1" class="oneAnch"></a>
    <li class="b"><a href="#prj3" class="two">b</a></li>
    <a id="prj2" class="twoAnch"></a>
    <li class="c"><a href="#prj1" class="three">c</a></li>
    <a id="prj3" class="threeAnch"></a>
  </div>
</div>

css html
1 Answers

You avoid this problem by defining an <a> element to show the starting position before the list.

/* The following styles have been added. */
a {
  color: white;
  text-decoration: none;
}

.portfolioWrapper .portScroller {
  overflow: auto;
  white-space: nowrap;
  height: 100%;
}

.portfolioWrapper .portScroller li.a {
  width: 100%;
  background-color: blue;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.b {
  width: 100%;
  background-color: red;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.c {
  width: 100%;
  background-color: green;
  display: inline-block;
  text-align: center;
}

li.a a.oneAnch {
  text-align: right;
}

li.a a.twoAnch {
  text-align: right;
}

li.a a.threeAnch {
  text-align: right;
}
<div class="portfolioWrapper">
    <a id="portAnchor"></a>

    <div class="portScroller"> 
        <!-- The following line has been added. -->
        <a id="start" class="oneAnch"></a>

        <li class="a">
            <a href="#prj2" class="one">First</a>
        </li>
        <a id="prj1" class="oneAnch"></a>

        <li class="b">
            <a href="#prj3" class="two">Second</a>
        </li>
        <a id="prj2" class="twoAnch"></a>

        <li class="c">
            <!-- The line below has been updated. -->
            <a href="#start" class="three">Thirth</a>
        </li>
        <a id="prj3" class="threeAnch"></a>

    </div>
</div>

user_150326880
Related