jQuery прокрутите вниз до элемента ID

Question

Я пытаюсь создать кнопку, которая прокручивает страницу до заданного элемента id. Сейчас у меня это Fiddle, но я хотел бы это несколько иначе:

1. прокрутки, пока в нижней части синего DIV (#three) не находятся в нижней части страницы, а сверху DIV прокрутки на верхнюю часть страницы.
2. Только прокрутка, если элемент не отображается на экране пользователю.

Как это можно сделать?

HTML

<button id="btn">CLICK</button> 
<div class="test" id="one"></div> 
<div class="test" id="two"></div> 
<div class="test" id="three"></div> 
<div class="test" id="four"></div> 

CSS

.test { 
    width: 100%; 
    height: 400px; 
} 

#one { background: red; } 

#two { background: green; } 

#three { background: blue; } 

#four { background: yellow; } 

JS

$("#btn").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#three").offset().top 
    }, 500); 
}); 

Answer 1

Хорошо вот первая часть -

$('html, body').animate({ 
    scrollTop: ($("#three").offset().top + $("#three").height() - $(window).height()) 
}, 500); 

просто немного математики и вы можете легко понять самостоятельно, что происходит.

и во второй части -

if(($('#three').offset().top >= $(window).scrollTop()) && ($('#three').offset().top < $(window).scrollTop() + $(window).height())) { ... 
} 

Комплексное сравнение значений, чтобы проверить видимость, если верхняя смещение элемента находится между окном scrollTop() и + высота окна() (то есть что-то вроде смещения нижней окна).

Отъезд fiddle

UPDATE: была ошибка в предыдущем, вам необходимо дополнительное условное выражение для проверки видимости #three с учетом нижнего смещением элемента между окном scrollTop() и нижнее смещение окна. Таким образом, полное состояние станет -

var eloffbottom = $('#three').offset().top + $('#three').height(); 
var winoffbottom = $(window).scrollTop() + $(window).height(); 
if((($('#three').offset().top >= $(window).scrollTop()) && ($('#three').offset().top < winoffbottom)) || ((eloffbottom >= $(window).scrollTop()) && (eloffbottom < winoffbottom))) { 
       alert('already in view'); 
    } 

UPDATED Fiddle полностью работает!

Кстати, только что нашел плагин jQuery, который может это сделать для вас. See here. Просто используйте его как - $('#three').visible() - возвращает true или false.

Answer 2

Рассчитывают верхнюю вычитанием высоту окна со смещенной вершины элемента, а затем добавление высоты элемента.

Demo

$("#btn").click(function() { 
 
    var winHeight = $(window).height(), 
 
    topOffset = $("#three").offset().top, 
 
    elementHeight = $('#three').height() 
 
    var top = topOffset - winHeight + elementHeight; 
 

 
    $('html, body').animate({ 
 
    scrollTop: top 
 
    }, 500); 
 
});

.test { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#one { 
 
    background: red; 
 
} 
 
#two { 
 
    background: green; 
 
} 
 
#three { 
 
    background: blue; 
 
    border: solid 3px gray; 
 
} 
 
#four { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<button id="btn">CLICK</button> 
 
<div class="test" id="one"></div> 
 
<div class="test" id="two"></div> 
 
<div class="test" id="three"></div> 
 
<div class="test" id="four"></div>