Question

我正在制作一个网站，您可以单击一个按钮，它会将您向下滚动到以下信息。我的问题是打开屏幕的大小是相对于设备屏幕的。这意味着固定滚动在不同设备上可能太远或不够远。总而言之，我的问题是：我该如何跳升准确的设备屏幕高度？这是我的代码：`

<div id='textPage1'>

    <div id='leesMeer'>
        <a href="#page2" class='leesMeer'type="button" value='Lees Meer'>LEES MEER</a> 
    </div>  

</div>

<div id='page2'>

    <div id='textPage2'>
        <p>hi</p>
    </div>  

</div>

还有我的CSS：

#textPage1  {
    float: right;
    margin-right: 100px;
    z-index: -1;
}

#beschrijving       {
    font-family: agency;
    font-size: 20px;
    color: #f2f2f2;
    letter-spacing: 2px;
    transform: scale(1, 1.1);
    line-height: 30px;
    z-index: 1;
    margin-left: 50px;
}

.leesMeer       {
    font-family: agency;
    font-size: 30px;
    color: #f2f2f2;
    border: 5px solid #f2f2f2;
    border-radius: 15px;
    padding: 12px 40px 12px 40px;
    text-decoration: none;
    -webkit-transition-duration: 0.5s;
    position: absolute;
}

Answer 1

您可以像以下示例一样使用Javascript指定向下滚动：

HTML：

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<div class="second" id="second">Hi</div>

CSS：

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

Javascript：

window.smoothScroll = function(target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    scroll = function(c, a, b, i) {
        i++; if (i > 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function(){ scroll(c, a, b, i); }, 20);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

这是jsfiddle http://jsfiddle.net/rjSfP/

中的代码

相对于设备尺寸滚动

1 个答案: