Как прокрутить вниз 100vh с помощью jQuery?

Так что я получил это:Как прокрутить вниз 100vh с помощью jQuery?

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

И я хочу, чтобы страницы прокрутки вниз 100vh при #down нажатии. Я уже провел какое-то исследование, и ничто не дало мне правильного ответа. Есть ли способ использовать vh, или мне придется прокручивать элемент, который я хочу (#container)?

источник

2015-03-12 Tommay

'scrolltop' всегда устанавливается в пикселях, поэтому вам нужно будет вручную преобразовать' vh'. 'мне придется прокручивать элемент, который я хочу (#container)' Я бы сказал, что это было бы гораздо лучшим решением в любом случае. –

Я предлагаю прокрутить до #container, но, возможно, window.innerHeight может помочь.

Для перехода к #container, вы можете попробовать что-то вроде этого:

кнопка HTML:

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

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

источник

2015-03-12 12:36:31 Beamer

Как перейти к контейнеру? Я попробовал, что предложил Беппос, и я попробовал просто scrollTop: $ («# container»), и ни один из них не работал. – Tommay

Я обновил свой ответ – Beamer

.. но ответ @Beppoz также должен работать - просто уменьшите высоту окна/ячейки. – Beamer

Смотреть это один http://jsfiddle.net/La0558tx/1/

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

источник

2015-03-12 13:11:07

Это просто переместило его в начало страницы. Я попытался удалить .top вещь, и это не сработало ... – Tommay

Поскольку тело достигло конца страницы (недостаточно места для перемещения вниз), если вы добавляете контент, вы можете видеть, что он работает http: // jsfiddle.net/La0558tx/2/ –

ответ

Смежные вопросы