当我单击按钮时，页面正在上升

I need help.I'm trying to find a solution about my problem. When i click the button,the page will to go up, but i don't want this.The page have to stay, after the clicking. Here is my code below;

我需要帮助。我正在努力找到解决我问题的方法。当我点击按钮时,页面会上升,但我不想要这个。点击后页面必须保留。这是我的代码如下;

<section class="category">
  <h1 class="uppercase">OTURMA ODASI</h1>
  <ul class="ad-list sub">
    <li>
      <div class="drop">
        <a href="#" class="subMenuOpener">
          <img src="images/content/icon/tire.svg" alt="img-description" height="48" width="48"><span>OTURMA GRUPLARI</span>
        </a>
        <ul style="display: block;" class="sub-ul">
          <li class="sub-li">
            <a href="oturma-odasi-mobilyalari/oturma-gruplari-takimlari/koltuk-takimlari-mobilyalari.html">
              <img src="images/content/icon/oturma_koltuk_takimlari.svg" alt="img-description" height="48" width="48"><span class="no-content">KOLTUK TAKIMLARI</span>
            </a>
          </li>
          <li class="sub-li">
            <a href="oturma-odasi-mobilyalari/oturma-gruplari-takimlari/kose-koltuklar-mobilyalar.html">
              <img src="images/content/icon/oturma_kose_koltuklar.svg" alt="img-description" height="48" width="48"><span class="no-content">KÖŞE KOLTUKLAR</span>
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <div class="drop">
        <a href="#" class="subMenuOpener">
          <img src="images/content/icon/tire.svg" alt="img-description" height="48" width="48"><span>SEHPALAR</span>
        </a>
        <ul style="display: block;" class="sub-ul">
          <li class="sub-li">
            <a href="oturma-odasi-mobilyalari/orta-zigon-yan-sehpalar-mobilyalar/zigon-sehpa.html">
              <img src="images/content/icon/sehpazigon.svg" alt="img-description" height="48" width="48"><span class="no-content">ZİGON SEHPA</span>
            </a>
          </li>
          <li class="sub-li">
            <a href="oturma-odasi-mobilyalari/orta-zigon-yan-sehpalar-mobilyalar/yan-sehpa.html">
              <img src="images/content/icon/sehpalar_yan_sehpa.svg" alt="img-description" height="48" width="48"><span class="no-content">YAN SEHPA</span>
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li>
    </li>
  </ul>
</section>

Thanks for everything

谢谢你的一切

2 个解决方案

#1

Instead of things like <a href="#" .... use <a href="javascript:void(1);" ....

而不是像

# in conjunction with a valid base href has this unwanted scrolling effect.

#与有效的基本href结合使用会产生不必要的滚动效果。

#2

You tagged jquery, so you have to prevent the default. See the following approach:

您标记了jquery,因此您必须阻止默认值。请参阅以下方法:

$('section.category ul li a').on('click', function(e)
{
   e.preventDefault(); // prevent normal link action

   // do your alternative logic
});

Reliable documentation: http://api.jquery.com/event.preventdefault/

可靠的文档:http://api.jquery.com/event.preventdefault/

#1