Question

我被赋予了编辑我没有创建的wordpress网站的任务。我不熟悉wordpress或php，但我有能够糊里糊涂，但现在我被卡住了。

网页在<ul>内有一组链接，当您点击链接时，页面会自动滚动（平滑）到网站中的部分。

<ul>看起来像这样。

          <ul class="main-menu" id="main-menu">
            <li id="menu-about_page"><a href="#">About</a></li>
            <li id="menu-energy_page"><a href="#">Energy</a></li>
          </ul>

about链接导航到about部分，看起来像这样。

<div id="about_page" class="page-row">
  <div class="page-wrap" id="about_page-wrap" alt="home_page">
    <div class="clear"></div>

    <div class="clear"></div>
    <div class="container">
        <div class="container-inner">
            <?= get_page_slider('About Slider'); ?>
        </div>
    </div>
    <div class="page-overlay"></div>
  </div>
</div>

我想用一行执行相同功能的按钮（客户端请求）替换菜单。我到目前为止的代码如下所示。

    <div>
         <a href="#"><button type="button" class="transparent_btn">About</button></a>
    </div>

这不起作用，我错过了什么。我想可能有一些花哨的javascript控制滚动，但据我所知，在代码中没有任何。

Answer 1

您必须添加要滚动到的部分的ID：

＆＃13;

<div>
  <a href="#about_page">
    <button type="button" class="transparent_btn">About</button>
  </a>
</div>

＆＃13;

Pd积。我会松开按钮标记并将链接设置为看起来像一个按钮。

Answer 2

为什么不保留当前的WP菜单和功能？听起来你真正需要做的就是将菜单看起来像按钮。由于标记没有改变，你不需要在WP模板中弄乱你的手，现有的滚动到javascript仍然可以工作。

＆＃13;

#main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: arial;
}
#main-menu li {
  display: inline-block;
}
#main-menu li a {
  display: inline-block;
  padding: 0 1em;
  line-height: 2em;
  background: #2a96c3;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.5), inset 0px 1px 1px rgba(255, 255, 255, 0.5);
}
#main-menu li a:hover {
  background: #ccc;
  color: #000;
}

＆＃13;

<ul class="main-menu" id="main-menu">
  <li id="menu-about_page"><a href="#">About</a></li>
  <li id="menu-energy_page"><a href="#">Energy</a></li>
</ul>

＆＃13;

Answer 3

您必须添加要滚动到的部分的ID：

<div>
  <a href="#about_page">
    <button type="button" class="transparent_btn">About</button>
  </a>
</div>

在jquery代码中使用这个javascript

$("a[href^='#']").on('click', function(e) {
    // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;
   if (hash == "#top")
   {
       $('html, body').animate({
           scrollTop: 0
         }, 1000, function(){});
    }else
   {
       $('html, body').animate({
           scrollTop: $(hash).offset().top - 70
         }, 1000, function(){});
    }    
});

用于滚动到网页中某个部分的HTML按钮

3 个答案: