Question

这里的基本想法是我在圆圈内有一个字体很棒的向下箭头。我希望能够点击圈子并让页面自动向下滚动到圆圈上方。关于它的一切工作除了只有圆的上半部分是可点击的事实。 Bootstrap用于行和列。浏览器是Chrome。我打开另一种解决方案（只要它只是HTML和CSS），但也想知道为什么会发生这种错误。

HTML

DEBUG: error getting user record; <CKError 0x174045010: "Internal Error" (1/5001); "Couldn't get a PCS object to unwrap encrypted data for field encryptedPublicSharingKey: (null)">

CSS

<div class="row">
    <div class="col-sm-12">
        <a name="howitworks" class="HowItWorks__anchor"></a>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <a href="#howitworks">
        <div class="HowItWorks__downArrow">
            <i class="fa fa-3x fa-angle-down" aria-hidden="true"></i>
        </div>
        </a>
    </div>
</div>

截图

Answer 1

最好不要在这里过度工程......在锚标签中删除那些额外的div，只需使用负边距：

<a id="your-link">
    <span class="fa fa-angle-down"></span>
</a>

a#your-link {
    border-radius: 30px;
    display: block;
    width: 30px;
    height: 30px;
    margin: -15px auto 0;
    text-align: center;
}

或添加相对定位：

a#your-link {
    border-radius: 30px;
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 15px;
}

实现这一目标的方法很少，它们都是有效的，只需将您的锚标记视为一个干净的块元素，然后将其正确定位。

<强> UPD 好的，尝试将您的部分标记保持为：

<section>
    // some section content
    <a class="section-link">
        <span class="fa fa-angle-down"></span>
    </a>
</section>

section {
    position: relative;
}

.section-link {
    border-radius: 30px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: -15px;
    margin-left: -15px;
}

Answer 2

TL; DR：所有父母都需要将高度设置为等于圆div。

终于搞定了。我的解决方案是将包含包含锚标记circle div的列div的行div的高度设置为30px，如下所示：

HTML

<div class="row">
    <div class="col-sm-12">
        <a name="howitworks" class="HowItWorks__target"></a>
    </div>
</div>

<div class="row HowItWorks__anchorWrapper">
    <div class="col-sm-12">
        <a href="#howitworks">
            <div class="HowItWorks__downArrow">
                <i class="fa fa-3x fa-angle-down" aria-hidden="true"></i>&nbsp;
            </div>
        </a>
    </div>
</div>

CSS

.HowItWorks__target {
    position: absolute;
    top: -50px;
}
.HowItWorks__anchorWrapper {
    height: 30px;
}
.HowItWorks__anchor {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    text-align: center;
}
.HowItWorks__downArrow {
    color: $white;
    background-color: $brand-blue-dark;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    text-align: center;
    padding-top: 5px;
    padding-left: 3px;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 25px);
}

只有嵌套在锚点中的div的上半部分是可点击的

2 个答案: