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

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

jquery html

如何使用jQuery向下滚动100vh？,jquery,html,Jquery,Html,所以我有这个： <!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='styles

所以我有这个：

<!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>


下尚普兰赛船会
南伯灵顿你好。我们是
下尚普兰赛船会。
我们在尚普兰湖有一个大胆的帆船教育新计划
看看
这是我们正在做的
航海最重要的是经验。读所有你想读的书——你仍然需要在水面上呆上一段时间
唐尚普兰赛船会是一个非营利性组织，旨在为学生提供大量的水上活动时间。它将在尚普兰湖上进行为期三周的全天候龙骨船航行，这是许多其他地方所没有的，它将比任何其他地方都能教给学生更多的东西
这门课程不适合新水手。这是为那些知道如何航行，但想把它提升到下一个水平的孩子们准备的。这是为那些想进入帆船比赛世界的孩子们准备的
在课程结束时，他们就这么做了。课程结束时，学生们将在尚普兰湖进行全天的比赛。这对学生来说是一个独特的机会，让他们运用新学到的技能，建立信心，并
$（文档）.ready（函数（）{
$（“#向下”）.mouseover（函数（）{
$（“#向下”）.animate（{backgroundColor:#1363bf“}，500）
});
$（“#向下”）.mouseout（函数（）{
$（“#向下”）.animate（{backgroundColor:#e03535“}，500）
});
$（“#向下”）。单击（函数（）{
$（“身体”）。设置动画({
滚动顶部：$（“100vh”）
}, 800)
});
});

我想让页面在点击“向下”时向下滚动100vh。我已经做了一些研究，但没有什么能给我一个正确的答案。是否有使用vh的方法，或者我必须滚动到我想要的元素（#容器）？

我建议滚动到

#容器

，但可能

窗口。innerHeight

会有所帮助

要滚动到

#容器

，您可以尝试以下操作：

HTML按钮：

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

看到这个了吗

scrolltop

始终以像素为单位设置，因此您需要手动转换

vh

单位

我是否必须滚动到我想要的元素（#容器）

无论如何，这将是一个更好的解决方案。这只是将其移动到页面顶部。我尝试删除.top，但没有成功…因为正文已到达页面末尾（没有足够的空间向下移动），如果添加内容，您可以看到它正在工作如何滚动到容器？我尝试了Beppoz的建议，我尝试了scrollTop:$（“#容器”），但两者都不起作用…但是@Beppoz answer也应该起作用-只需减少窗口/单元格高度。我最终为window.innerHeight设置了一个变量height。这终于奏效了。谢谢

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

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