cara responsive dengan baik ???

gan saya mau bertanya, di kodingan saya kalo dibuka di mobile pada saat bagian paling bawah (footer) bila ditunggu beberapa detik selalu kembali ke atas sekitar jarak beberapa px. setelah saya coba cari error nya kemungkinan saya ada kesalahan tetapi tidak tau cara fix nya. mohon bantuan pemecahannya,,,

Kurang lebih bagian ini yang eror, di JS bagian ".percent".

HTML
<div class="skillwrap">
            <div class="skill-percent" data-percent="93%">
              <div class="percent">
                <div class="slide-percent">
                  <span>90%</span>
                </div>
              </div>
            </div>
            <div class="skill-bar" data-percent="90%">
              <div class="bar">
                <span>HTML</span>
                <div class="slide-bar"></div>
              </div>
            </div>
          </div>

CSS
/*--Skill Bar--*/
.skillbar {
  background-color: #f5f5f5;
  padding: 30px 0;
}
.bar {
  position: relative;
  background-color: #ddd;
  width:100%;
  height:13px;
  transition: .5s;
  margin-bottom: 40px;
}
.bar span {
  position: absolute;
  top: -20px;
}
.slide-bar {
  position: absolute;
  height: 13px;
  width: 0;
  top: 0;
  background:#00bfc1;
}
.percent {
  position: relative;
  width: 0;
  height: 30px;
  margin-bottom: 2px;
  overflow: hidden;
}
.slide-percent {
  position: absolute;
  right: 0;
  width: 30px;
  height: 30px;
  background-image: url(../img/skill/skill-bar-5.png);
  z-index: 1;
}
.slide-percent span {
  display: block;
  font-size: .6em;
  font-weight: bold;
  line-height: 25px;
  text-align: center;
  color: #eaeaea;
}
.skillbar,.bar,.slide-bar,
.percent,.slide-percent,.bar span,
.slide-percent span {
  max-width: none !important;
}
/*--end--*/

Js
if (wScroll > $('.skillbar').offset().top - 300) {
    $('.skill-percent , .skill-bar').each(function(){
      $(this).find('.percent , .slide-bar').animate({
        width:$(this).attr('data-percent')
      },5000,'easeInOutExpo');
    });
  };