Не удается остановить кнопки перехода в верхнюю часть страницы на мобильном телефоне

Question

У меня проблемы с этим кодом для кнопок, которые отображают:inline-block / display:none. Он отлично работает в браузерах, но не в мобильных... он работает, но переходит на верх страницы. Я уже использовал: вернуть ложь; stopPropagation(); stopImmediatePropagation; и protectDefault(). Когда я добавляю любой из них, он перестает идти вверх, но кнопка перестает работать. Я также попробовал href="javascript:void(0)" и href="javascript"

Помогите?!

$(document).ready(function() {
  $(document).delegate('.open', 'click', function(event) {
    $(this).addClass('oppenned');
    event.stopPropagation();
  })
  $(document).delegate('body', 'click', function(event) {
    $('.open').removeClass('oppenned');
  })
  $(document).delegate('.cls', 'click', function(event) {
    $('.open').removeClass('oppenned');
    event.stopPropagation();
  });
});


// Services Carousel starts here

let array = ["service-1", "service-2"];
let index = 0;

function showNextInfo() {

  document.getElementById(array[index]).style.display = "none";
  if (index === array.length - 1) {
    index = -1;
  }
  document.getElementById(array[++index]).style.display = "inline-block";
}

[]

function showPreviousInfo() {
  if (index === 0) {
    index = array.length - 1;
    document.getElementById(array[0]).style.display = "none";
    document.getElementById(array[index]).style.display = "inline-block";
  } else {
    document.getElementById(array[index]).style.display = "none";
    document.getElementById(array[--index]).style.display = "inline-block";
  }

}

/* div resize */
var $d = $(".height"),
  tallestDivHeight = 0


$d.each(function(i, v) {
  var $t = $(this),
    thisDivsHeight = $t.outerHeight()

  console.log(thisDivsHeight)

  if (thisDivsHeight > tallestDivHeight) tallestDivHeight = thisDivsHeight
})


$d.css('height', tallestDivHeight)


//

/* div resize 2*/
var $d = $(".height2"),
  tallestDivHeight = 0


$d.each(function(i, v) {
  var $t = $(this),
    thisDivsHeight = $t.outerHeight()

  console.log(thisDivsHeight)

  if (thisDivsHeight > tallestDivHeight) tallestDivHeight = thisDivsHeight
})


$d.css('height2', tallestDivHeight)


//

// Services Carousel 2 starts here

let array2 = ["service-3", "service-4"];
let indice = 0;

function showNextInfo2() {
  document.getElementById(array2[indice]).style.display = "none";
  if (indice === array2.length - 1) {
    indice = -1;
  }
  document.getElementById(array2[++indice]).style.display = "inline-block";
}

[]

function showPreviousInfo2() {
  if (index === 0) {
    index = array2.length - 1;
    document.getElementById(array2[0]).style.display = "none";
    document.getElementById(array2[indice]).style.display = "inline-block";
  } else {
    document.getElementById(array2[indice]).style.display = "none";
    document.getElementById(array2[--indice]).style.display = "inline-block";
  }
}

body,
html {
  margin: 0px;
}


/* Text formatting */

h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 80pt;
  color: white;
  weight: 700;
  text-transform: uppercase;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  weight: 900;
  text-transform: uppercase;
  line-height: 60px;
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  weight: 900;
  text-transform: uppercase;
  line-height: 40px;
}

.h3services {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  weight: 900;
  color: black;
  text-transform: uppercase;
  padding: 1px 1px 1px 0px;
  margin: 1px 1px 1px 0px;
  font-weight: bold;
}

h4 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  color: grey;
  margin-top: -20px;
  text-transform: uppercase;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: justify;
}

hr {
  margin-top: 1px;
  margin-bottom: 30px;
  padding-bottom: 1px;
}


/* End of text formatting */

.container {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.header {
  width: 100%;
  height: 100%;
  min-height: 768px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.45)), url(https://image.ibb.co/j8BXPG/mainimg.jpg);
  background-position: center;
  background-size: cover;
  font-size: 50pt;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 900;
  color: white;
}


/* new sticky bar */

.open {
  position: fixed;
  top: 10px;
  right: 40px;
  width: 50px;
  height: 50px;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s linear;
  z-index: 1;
}

.open:hover {
  opacity: 0.8;
}

.open span {
  display: block;
  float: left;
  clear: both;
  height: 4px;
  width: 40px;
  border-radius: 40px;
  background-color: #fff;
  position: absolute;
  right: 3px;
  top: 3px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.open span:nth-child(1) {
  margin-top: 10px;
  z-index: 9;
}

.open span:nth-child(2) {
  margin-top: 25px;
}

.open span:nth-child(3) {
  margin-top: 40px;
}

.sub-menu {
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  height: 0;
  width: 0;
  right: 0;
  top: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  z-index: 18;
  overflow: hidden;
}

.sub-menu li {
  display: block;
  float: right;
  clear: both;
  height: auto;
  margin-right: -160px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sub-menu li:first-child {
  margin-top: 180px;
}

.sub-menu li:nth-child(1) {
  -webkit-transition-delay: 0.05s;
}

.sub-menu li:nth-child(2) {
  -webkit-transition-delay: 0.10s;
}

.sub-menu li:nth-child(3) {
  -webkit-transition-delay: 0.15s;
}

.sub-menu li:nth-child(4) {
  -webkit-transition-delay: 0.20s;
}

.sub-menu li:nth-child(5) {
  -webkit-transition-delay: 0.25s;
}

.sub-menu li a {
  color: #fff;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 18px;
  width: 100%;
  display: block;
  float: left;
  line-height: 40px;
}

.oppenned .sub-menu {
  opacity: 1;
  height: 400px;
  width: 400px;
}

.oppenned span:nth-child(2) {
  overflow: visible;
}

.oppenned span:nth-child(1),
.oppenned span:nth-child(3) {
  z-index: 501;
  transform: rotate(45deg);
}

.oppenned span:nth-child(1) {
  transform: rotate(45deg) translateY(12px) translateX(12px);
}

.oppenned span:nth-child(2) {
  height: 400px;
  width: 400px;
  right: -160px;
  top: -160px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.oppenned span:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px) translateX(10px);
}

.oppenned li {
  margin-right: 168px;
}


/* end of new sticky bar*/

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}


/* end of the new sticky */


/* ABOUT */

.about {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient( rgba(51, 53, 56, 0.9), rgba(51, 53, 56, 0.9)), url(https://image.ibb.co/k6TXrw/backgroundsection.jpg), no-repeat;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row nowrap;
}

.highlight-1 {
  color: white;
  height: auto;
  flex-grow: 4;
  margin-left: 10%;
}

.highlight-2 {
  color: white;
  height: auto;
  flex-grow: 4;
  margin: 5%;
}

.about-text {
  flex-grow: 1;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: white;
  margin-right: 10%;
  padding-left: 5%;
  border-left: 4px solid white;
}


/* END OF ABOUT */


/* SERVICES-1 */

.client-retention {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient( rgba(33, 33, 33, 0.7), rgba(33, 33, 33, 0.8)), url(https://image.ibb.co/hYJAdb/pexels_photo_461077.jpg), no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row nowrap;
}

.services-list {
  color: white;
  height: auto;
  width: 40%;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  background: linear-gradient( rgba(133, 139, 147, 0.65), rgba(133, 139, 147, 0.2));
  display: flex;
  justify-content: space-around;
  margin: 0% 0% 0% 10%;
  padding: 0% 2% 2% 2%;
}

#services-title {
  width: 60%;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  display: flex;
  justify-content: space-around;
  margin-right: 10%;
}

.height {
  margin: 10px;
  padding: 10px;
}

#service-1 {
  /*visibility: visible;
  clear: both;*/
  display: inline-block;
}

#service-2 {
  /*visibility: hidden;
  clear: both;*/
  display: none;
}

#divbuttons {
  z-index: 401;
  width: 40px;
  padding: 1%;
  flex: display;
  align-self: flex-end;
  margin-bottom: 2%;
}

#buttonup {
  color: white;
  opacity: 0.5;
  -webkit-transition: color 2s ease-out;
  -moz-transition: color 2s ease-out;
  -o-transition: color 2s ease-out;
  transition: color 2s ease-out;
}

#buttonup:hover {
  color: black;
  cursor: pointer;
}

#buttondown {
  color: white;
  opacity: 0.5;
  -webkit-transition: color 2s ease-out;
  -moz-transition: color 2s ease-out;
  -o-transition: color 2s ease-out;
  transition: color 2s ease-out;
}

#buttondown:hover {
  color: black;
  cursor: pointer;
}


/* END OF SERVICES-1 */


/* SERVICES-2 */

.client-acquisition {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient( rgba(33, 33, 33, 0.7), rgba(33, 33, 33, 0.8)), url(http://www.conexapartners.com/img/services2.jpg), no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row nowrap;
}

.services-list2 {
  color: white;
  height: auto;
  width: 40%;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  background: linear-gradient( rgba(133, 139, 147, 0.65), rgba(133, 139, 147, 0.2));
  display: flex;
  justify-content: space-around;
  margin: 0% 10% 0% 0%;
  padding: 0% 2% 2% 2%;
}

#services-title2 {
  width: 60%;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  display: flex;
  justify-content: space-around;
  margin-left: 10%;
}

#service-3 {
  /*visibility: hidden;*/
  display: inline-block;
}

#service-4 {
  /*visibility: hidden;*/
  display: none;
}

.height2 {
  margin: 10px;
  padding: 10px;
}

#divbuttons2 {
  z-index: 401;
  width: 40px;
  padding: 1%;
  flex: display;
  align-self: flex-end;
  margin-bottom: 2%;
}

#buttonup2 {
  color: white;
  opacity: 0.5;
  -webkit-transition: color 2s ease-out;
  -moz-transition: color 2s ease-out;
  -o-transition: color 2s ease-out;
  transition: color 2s ease-out;
}

#buttonup2:hover {
  color: black;
  cursor: pointer;
}

#buttondown2 {
  color: white;
  opacity: 0.5;
  -webkit-transition: color 2s ease-out;
  -moz-transition: color 2s ease-out;
  -o-transition: color 2s ease-out;
  transition: color 2s ease-out;
}

#buttondown2:hover {
  color: black;
  cursor: pointer;
}


/* END OF SERVICES-2 */


/* CONTACT */

#contact-wrap {
  position: relative;
  background: /*linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2) ),*/
  url(https://image.ibb.co/eiRGZG/contact2.jpg), no-repeat center center;
  background-position: center;
  background-size: cover;
  height: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 1% 1% 1% 5%;
  flex-flow: row wrap;
  display: flex;
}

#contact-info {
  width: 25%;
  height: 35%;
  background: linear-gradient( rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));
  color: #303030;
  font-family: 'Lato', sans-serif;
  font-size: 16pt;
  padding: 2% 3% 3% 3%;
  margin: 5% 5% 2% 5%;
  display: flex;
  flex-direction: column;
}

#contact-info-title {
  width: inherit;
  font-size: 40px;
  color: #303030;
  font-family: 'Roboto', sans-serif;
  margin: -35% 0 0% 0%;
  padding: 0 0 0 0;
}

#contact-data {}

.form-title {
  width: auto;
  font-size: 40px;
  text-align: right;
  line-height: 5px;
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
}

.contactForm {
  width: 18%;
  position: absolute;
  bottom: 10%;
  right: 16%;
  text-align: right;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: white;
}


/* forms */

.submit {
  width: 100%;
}

.align {
  height: inherit;
  /* de modificat */
}

.input {
  font-family: 'Roboto', sans-serif;
  padding: 1%;
  margin-top: 3%;
  border: 0;
  width: 100%;
  height: 35px;
}

.message {
  height: 100px;
}

.button {
  width: 102%;
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button:hover {
  background-color: #c4c4c4;
  color: black;
}


/*END OF CONTACT */


/* RESPONSIVE PART */

@media (max-width: 1680px) {
  .header {
    font-size: 42pt;
    height: 1050px;
  }
  .about {
    width: 100%;
  }
  .about-text {}
  .about < * {
    margin: 1% 3% 1% 3%;
  }
}

@media (max-width: 1366px) {
  .header {
    font-size: 32pt;
    height: 768px;
  }
  .about {
    width: 100%;
  }
  .about-text {}
  .about < * {
    margin: 1% 3% 1% 3%;
  }
}

@media (max-width: 1280px) {
  .header {
    font-size: 32pt;
    height: 800px;
  }
  .about {
    width: 100%;
  }
  .about-text {
    margin-top: 3%;
  }
  .about < * {
    margin: 1% 2% 1% 2%;
  }
}

@media (max-width: 800px) {
  .header {
    font-size: 25pt;
    height: 600px;
  }
  .about {
    width: 100%;
    flex-flow: column-reverse wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .about-text {}
  .highlight-1,
  .highlight-2 {
    margin: 2% 5% 2% 5%;
  }
  .client-retention {
    width: 100%;
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: space-around;
    align-items: center;
  }
  .services-list {
    align-self: center;
    margin: 0%;
    margin-right: 20%;
    order: 2;
  }
  #divbuttons {
    width: 10%;
    align-self: flex-end;
    margin-right: 0;
    order: 3;
    margin-left: 10%;
  }
  #services-title {
    align-self: center;
    padding: 1%;
    margin: 5%;
    order: 1;
  }
}

@media (max-width: 375px) {
  .header {
    font-size: 21pt;
    height: 667px;
  }
  .about {
    width: 100%;
    flex-flow: column-reverse wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .about-text {}
  .highlight-1,
  .highlight-2 {
    margin: 2% 5% 2% 5%;
  }
}

@media (max-width: 320px) {
  /* .header {
    font-size: 18pt;
    height: 240px;
  } 
  .about {
  width: 100%;
  flex-flow: column-reverse wrap;
  justify-content: flex-start;
  align-items: flex-start; 
   
  }
  
  .about-text {
    
  }
  
  .highlight-1, .highlight-2 {
     margin: 2% 5% 2% 5%;
  }*/
  .header {
    font-size: 18pt;
    height: 400px;
  }
  .about {
    width: 320px;
    flex-flow: column-reverse wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .about-text {}
  .highlight-1,
  .highlight-2 {
    margin: 2% 5% 2% 5%;
  }
  .client-retention {
    width: 320px;
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: space-around;
    align-items: center;
  }
  .services-list {
    align-self: center;
    margin: 0%;
    margin-right: 2%;
    order: 2;
  }
  #divbuttons {
    width: 3%;
    align-self: flex-end;
    margin-right: 0;
    order: 3;
    margin-left: 2%;
  }
  #services-title {
    align-self: center;
    padding: 1%;
    margin: 2%;
    order: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,900|Roboto:400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="container">

  <!-- nav -->
  <div class="open"> <span class="cls"></span> <span>
        <ul class="sub-menu ">
          <li> <a href="#">Home</a> </li>
          <li> <a href="#">About Us</a> </li>
          <li> <a href="#">Services</a> </li>
          <li> <a href="#">Contact</a> </li>
        </ul>
      </span> <span class="cls"></span>
  </div>
  <!-- /nav  -->
  <!-- header -->
  <div class="header">
    <h1 class="headertitle"> CONEXA PARTNERS</h1>
  </div>
  <!-- /header -->

  <!-- about -->
  <div class="about">
    <div class="highlight-1">
      <img src="https://image.ibb.co/fsa01w/icons8_vastu_consultancy_50.png" width="40px">
      <h3>Client Retention</h3>
      <p> We help your company increase client retention through increased awareness of needs and drivers. </p>
    </div>

    <div class="highlight-2">
      <img src="https://image.ibb.co/kyh8ob/icons8_handshake_50.png" width="40px">
      <h3>Client Acquisition</h3>
      <p> We help your company grow with insight on needs, goals and characteristics of potential clients.</p>
    </div>

    <div class="about-text">
      <h2>ABOUT US</h2>
      <p style="color: white">Conexa Partners supports your company’s growth by delivering incremental insight about the needs and experiences of your clients.</p>
      <p>We have curated conversations with your future, current and past clients.</p>
      <p>The insight from these conversations enable you to better message, serve and deliver what your clients seek. We offer exceptional ROI, speed and an unrivaled passion for our clients’ success.</p>
    </div>
  </div>
  <!-- /about -->

  <!-- CLIENT RETENTION -->
  <div class="client-retention">
    <div class="services-list">

      <div id="service-1">
        <h3>Client Landscapes</h3>
        <hr color="white" width="10%" align="left">
        <p class="servicestext">What does your target client want and need? How do they make their buying decisions? Which factors make the difference?</p>
        <p class="servicestext">Get all this and more with client profiles that we build based on curated conversations with your target clients.</p>
      </div>
      <div id="service-2">
        <h3>Qualitative Message-Testing</h3>
        <hr color="white" width="90%" align="left">
        <p>Market-test and hone your company’s offering, messaging and/or concept with people who can make or break your future success. We partner with you to identify the audience and areas of query.</p>
        <p>Conexa has the conversations and then delivers you intelligence based on the dialogues. Success, made.</p>
      </div>

    </div>
    <div id="divbuttons">
      <i id="buttonup" onclick="showNextInfo();" class="fa fa-chevron-circle-up fa-2x" aria-hidden="true"></i>
      <i id="buttondown" onclick="showPreviousInfo(); stopJump();" class="fa fa-chevron-circle-down fa-2x" aria-hidden="true"></i>
    </div>
    <div id="services-title">
      CLIENT RETENTION

    </div>


  </div>
  <!-- END CLIENT RETENTION -->



  <!-- CLIENT ACQUISITION -->
  <div class="client-acquisition">
    <div id="services-title2">
      CLIENT ACQUISITION

    </div>
    <div id="divbuttons2">
      <i id="buttonup2" onclick="showNextInfo2()" class="fa fa-chevron-circle-up fa-2x" aria-hidden="true"></i>
      <i id="buttondown2" onclick="showPreviousInfo2()" class="fa fa-chevron-circle-down fa-2x" aria-hidden="true"></i>
    </div>
    <div class="services-list2">

      <div id="service-3">
        <h3>Client Landscapes</h3>
        <hr color="white" width="10%" align="left">
        <p class="servicestext">What does your target client want and need? How do they make their buying decisions? Which factors make the difference?</p>
        <p class="servicestext">Get all this and more with client profiles that we build based on curated conversations with your target clients.</p>
      </div>
      <div id="service-4">
        <h3>Qualitative Message-Testing</h3>
        <hr color="white" width="90%" align="left">
        <p>Market-test and hone your company’s offering, messaging and/or concept with people who can make or break your future success. We partner with you to identify the audience and areas of query.</p>
        <p>Conexa has the conversations and then delivers you intelligence based on the dialogues. Success, made.</p>
      </div>

    </div>



  </div>


  <!-- END CLIENT ACQUISITION -->

  <!-- CONTACT -->
  <div id="contact-wrap">
    <div id="contact-info">
      <h2 style="color:black">Get in Touch</h2>
      <p><i class="fa fa-phone" aria-hidden="true"></i> [phone]</p>
      <p><i class="fa fa-envelope" aria-hidden="true"></i> [e-mail]</p>
      <p><i class="fa fa-globe" aria-hidden="true"></i> www.conexapartners.com</p>
    </div>
    <div class="contactForm">
      <div class="submit">
        <p class="form-title">Contact Us</p>
        <form class="align">
          <input type="text" class="input" name="fullname" placeholder="Full Name">
          <input type="text" class="input" name="phone" placeholder="Phone">
          <input type="text" class="input" name="email" placeholder="Email">
          <textarea name="comment" class="input message" form="usrform" placeholder="Message"></textarea>
          <input type="submit" class="button" value="Send">
        </form>

      </div>
      <!--  end of submit -->
    </div>

  </div>

  <!-- end of CONTACT -->



  <!-- end of container of the whole site -->
</div>