如何使按钮图像居中并使其导航到下一篇文章

Question

伙计们让我重新开始，似乎没有人理解我的简单问题。在编码方面，我们并不都是专业人士。所以请耐心等待我，我还在学习。我只想知道您需要我的html/css代码的哪一部分才能更好地了解我想要创建的内容。

所以描述一下我现在所拥有的：

1 个索引.html2 风格.css

在我的网站顶部有一个背景图像，位于幻灯片容器中。菜单是浮动在右侧的最小打开/关闭按钮。

现在我想使用箭头的图像文件，将其对齐在我的背景图像的中心，并使用它来导航到我网站的下一部分，称为"关于我"。例如，我知道如何将索引.html链接到大约.html文件，但在这种情况下，我有一个索引文件，其中菜单按钮/部分位于div 和 li 类 a 中，链接为 ahref。

所以我的问题是我需要做什么才能使箭头按钮链接到 ahref"关于我"部分。我必须在 html 和 css 中放入此代码的内容和位置。我有很多可用的代码，但请告诉我您需要哪一部分。

感谢您的帮助

<!-- HOME (SLIDER) -->
<section id="home" class="notoppadding text-light">
    <div class="section-inner">

    <!-- REVOLUTION SLIDER -->
    <div class="rev-slider-container">
        <div class="rev-slider" >
            <ul>
                <!-- THE FIRST SLIDE -->
                <li data-transition="slidedown" data-slotamount="5" data-masterspeed="1200" >
                    <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
                    <img src="files/uploads/slider-bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
                    <!-- LAYER NR. 1 -->    
                    <div class="tp-caption srcaption-bigwhite lft ltb"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="0"
                    data-speed="800"
                    data-start="400"
                    data-easing="easeInOutQuad"
                    data-endspeed="800"
                    data-endeasing="easeInOutQuad"
                    style="z-index: 2"><strong></strong>
                    </div>
                </li> <!-- end first slide -->
                </li>
            </ul>
        </div>
    </div> <!-- END .rev-slider-container -->        
    <!-- REVOLUTION SLIDER -->

Answer 1

jsBin demo

<a class="nextpageLink" href="#about"></a>

.CSS：

.nextpageLink{
   position: absolute;
   z-index: 2;
   margin: 0 auto;
   left:0;
   right:0;
   bottom: 10px;
   width:80px;
   height:80px;
   background: url(img/next.png) 0 0 ; // 80x160px sprite image
}
.nextpageLink:hover{
   background-position: 0 -80px ;
}

假设您创建了一个精灵图像，在按钮悬停时，您只需更改背景位置即可。

+-------+    >> 80 x (80*2) px background image
|       |
| gray  |
|       |
+-------+    >> on hover move up by -80px
|       |
| white |
|       |
+-------+

---

如果您不想导航到其他页面，则链接需要锚定页面上的ID元素：

<a class="nextpageLink" href="#about"></a>

因此，您还需要与锚点相关的ID - 分配给about元素，例如：

<div id="about" class="wrapper">
   <!-- ABOUT DIVS AND CONTENT HERE-->
</div>

您的页面将滚动。

---

如果你想用动画滚动，这里已经有很多类似的问题，涉及JS的使用。使用 Goog 或 StackOverflow 的搜索输入。

提示：虽然您执行一些 Goog 来过滤与 StackOverflow 相关的结果，但如下所示：

如何对页面滚动进行动画处理：Stackoverlfow