Question

所以我得到了这个：

<!DOCTYPE html>
<html>
<head>
    <title>The Down-Champlain Regatta</title>
    <link rel="stylesheet" href="homepage.css"/>
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
</head>
<body>
    <div id="topcontainer">
        <img src="Images/Kim.jpg" id="tom">
        <img src="Images/Kim.jpg" id="zach">

        <div id="head">
            <p id="a">Hello South Burlington. We're the</p>
            <h5>Down Champlain Regatta.</h5>
            <p id="s">And we've got a bold new plan for sailing education on Lake Champlain.</p>
        </div>

        <div id="down">
            <p>check it out</p>
        </div>
    </div>

    <div id="container">
        <h5>Here's What We're Doing</h5>
        <p class="beginning">The most important thing in sailing is experience. Read all the books you want - you'll still need time on the water.</p>
        <p>The Down Champlain Regatta is a non-profit organization designed to give students, if nothing else, tons of time on the water. Its three weeks of all-weather keelboat sailing on Lake Champlain, something not offered in many other places, will teach students more than anything else can.</p>
        <p>This course is not for new sailors. It's for kids who know how to sail, but want to take it to the next level. It's for kids who want to move up into the world of keelboat racing.</p>
        <p>And at the end of the course, they do just that. The course finishes with an all-day, student-led race down Lake Champlain. This is a unique opportunity for the students to apply their newly learned skills, build confidence, and </p>

    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#down").mouseover(function(){
                $("#down").animate({backgroundColor: "#1363bf"}, 500)
            });

            $("#down").mouseout(function(){
                $("#down").animate({backgroundColor: "#e03535"}, 500)
            });

            $("#down").click(function(){
                $("body").animate({
                    scrollTop: $("100vh")
                }, 800)
            });
        });
    </script>
</body>
</html>

我想在点击#down时让页面向下滚动100vh。我已经做过一些研究，没有什么能给我一个正确的答案。有没有办法使用vh，或者我将不得不滚动到我想要的元素（#container）？

Answer 1

我建议滚动到#container，但也许window.innerHeight可以提供帮助。

要滚动到#container，您可以尝试类似的内容：

HTML按钮：

<a href="#container">Check it out</a>

JS

$(document)
    .on('click', 'a[href^="#"]', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        $('html, body')
            .animate({
                scrollTop: $(target).offset().top}, 'slow', 'swing', function() {});
    })

Answer 2

见这个 http://jsfiddle.net/La0558tx/1/

$('html, body').animate({
 scrollTop: $('#container').position().top+'px'
}, 800)

如何使用jQuery向下滚动100vh？

2 个答案: