Tłumaczenie listy w JavaScript, odnośniki do podstron

Cześć,

Mam dwa problemy z którymi nie wiem jak sobie poradzić :(

1.Co mogę zrobić aby tłumaczyć również w menu nazwy sekcji?
Chodzi mi o tłumaczenie zawartości tej listy var planet = ["Strona główna", "Strona 7", "Strona 6","Strona 5", "Strona 4", "Strona 3", "Strona 2", "Strona 1"]; całość znajduje się na stronie https://codepen.io/xjafajx/pen/abJrrew

2.W stopce mam takie jakby szybkie odnośniki do tych podstron to jak zrobić żeby po kliknięciu od razu mnie przeniosło na odpowiednia podstronę?

<ul class="list-unstyled">
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#index" data-translate-id="112">Index</a>
                        </li>
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#first" data-translate-id="113">First</a>
                        </li>
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#second" data-translate-id="114">Second</a>
                        </li>
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#three" data-translate-id="115">Three</a>
                        </li>
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#fourth" data-translate-id="116">Fourth</a>
                        </li>
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#fifth" data-translate-id="117">Fifth</a>
                        </li>
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#sixth" data-translate-id="118">Sixth</a>
                        </li>
                        <li>
                            <span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#seventh" data-translate-id="119">Seventh</a>
                        </li>
                    </ul>

Ten href mi nie działa znaczy się w linku dodaje na końcu etykietę ale nie przenosi mnie do podstrony...

z góry dziękuję za wszelką okazaną pomoc

1. Jak to tłumaczyć? A gdzie tam jest tłumaczenie?
2. jak masz element o id "sixth", to link do niego będzie tak wyglądał: <a href="#sixth">klikaj</a>

Ten href mi nie działa znaczy się w linku dodaje na końcu etykietę ale nie przenosi mnie do podstrony...

Może biblioteka, której używasz, blokuje zdarzenia kliku?

2. Zrób zwykłe linki do kotwic:

<a href="#fourth">cztery</a>

1. A co tu w ogóle tłumaczysz?
   Jak potrzebujesz kilku wersji językowych, to umieszczasz sobie nazwy zmiennych zamiast sztywnych treści, a ich wartość definiujesz zależnie od języka.

Dobra poprawiam opis może teraz będzie bardziej zrozumiałe:

Mam taki problem że klikając w odnośniki aby szybko przejść do podstrony zamienia mi tylko treść ale niestety nie zmienia mi tekstu w menu :(

Dopiero po kliknięciu w przyciski <> zmienia mi tekst w menu.

Czy możecie mi pomóc z moim problemem? Jak zrobić aby po kliknięciu w szybkie przejście do podstrony zmienił również tekst na odpowiedni do podstrony w menu?

Link do kodu : https://codepen.io/Jafaj/pen/VwbQaNb