Question

我有这段代码在单击固定按钮时逐段滚动视口高度，直到到达结尾。然后我想淡出按钮。

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/

Answer 1

只需放置$(document).height()而不是$(window).height()：）

Answer 2

试试这个，

undefined

您正在滚动窗口而不是文档

Answer 3

您可以跟踪当前部分，并将viewportHeight乘以当前部分。这样你就可以逐节滚动。

＆＃13;

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;

滚动视口高度直到结束

3 个答案: