我有这段代码在单击固定按钮时逐段滚动视口高度,直到到达结尾。然后我想淡出按钮。
HTML
$(document).on('click', '.cd-go', function(event){
event.preventDefault();
var viewportHeight = $(window).height();
$('html, body').animate({
scrollTop: viewportHeight,
complete: function () {
$('.cd-go').fadeOut(300);
}
}, 500);
});
js:
public static string GetResponseFromServer()
{
using (var client = new HttpClient())
{
var content = new FormUrlEncodedContent(new[]
{
new KeyValuePair<string, string>("sID", "6"),
new KeyValuePair<string, string>("sName", "anas"),
new KeyValuePair<string, string>("sMajor", "prog"),
});
var result = client.PostAsync("Your URL Goes here", content);
string resultContent = result.Result.Content.ReadAsStringAsync().Result;
return resultContent;
}
}
问题是它只是从第一部分到第二部分的滚动。这怎么可能一直一节到底?
编辑: 这是一个小提琴:http://jsfiddle.net/cyt57dsj/7/
答案 0 :(得分:1)
只需放置$(document).height()
而不是$(window).height()
:)
答案 1 :(得分:0)
试试这个,
undefined
您正在滚动窗口而不是文档
答案 2 :(得分:0)
您可以跟踪当前部分,并将viewportHeight
乘以当前部分。这样你就可以逐节滚动。
var currentSection = 0;
var totalSections = document.querySelectorAll("section").length;
$(document).on('click', '.cd-go', function(event){
event.preventDefault();
var viewportHeight = $(window).height();
currentSection++;
if (currentSection > totalSections - 1) currentSection = totalSections - 1;
$('html, body').animate({
scrollTop: viewportHeight * currentSection,
complete: function () {
$('.cd-swipe').slideDown(300);
}
}, 500);
});
&#13;
.cd-go {
width: 209px;
background: rgba(0,0,0, 0.17);
height: 212px;
border-radius: 212px;
color: #fff;
position: fixed;
bottom: -106px;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
}
.w-sec {
height:100vh;
}
.w-sec:first-of-type {
background:#fff;
}
.w-sec:nth-of-type(2) {
background:#ccc;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cd-go">
DOWN
</a><!-- scroll btn -->
<section id="section1" class="w-sec cd-section">
content
</section><!-- section 2 -->
<section id="section2" class="w-sec cd-section">
content
</section><!-- section 2 -->
<section id="section3" class="w-sec cd-section">
content
</section><!-- section 2 -->
&#13;