Question

我希望我的buttom能够在页面上占据一席之地。我正在寻找一些jquery但我宁愿在HTML5和css3中做它，如果它的工作原理。我还看了一下锚标签，但没有让它与mu按钮一起工作。 <button type="button" class="btn" >Contact-us</button> 和我的页面我想转到<div id="contact-us">

Answer 1

在您的div中，或在它上方，您可以使用如下链接：

<a name="label"></a>

稍后您可以使用

链接到它

<a href = yoururl#label">Click here</a>

此类链接称为锚点，不会显示。

Answer 2

如上面的评论所述，使用anker来识别ID。如果你不想让按钮样式由anker包裹它。

<a href="#anker1"><button type="button" class="btn">Contact-us</button></a>
<!-- content goes here -->
<div id="anker1">here we go, could also be empty...</div>

通过平滑滚动获得非常好的效果，您可以轻松添加一些jQuery代码：

$(document).ready(function(){
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });
});

这里的工作示例：http://jsfiddle.net/b70xh8mg/1/

点击按钮后转到页面上的div

2 个答案: