降低Jquery Scroll的速度 [英] Slowing the speed of a Jquery Scroll
问题描述
我一直在使用jQuery滚动来增强我的视差滚动页面.具体来说就是这个. JQuery滚动到下一部分
I've been using a jQuery scroll to enhance my parallax scrolling page. Specifically, this one. JQuery Scroll to Next Section
我对jQuery完全陌生，(过去只使用过一些相当基本的JavaScript).我可以弄清楚如何更改和适应找到的代码以满足我的需求，但是我不知道如何降低滚动条的速度.
I am completely new to jQuery, (and have only used some fairly basic JavaScript in the past). I can work out how to change and adapt code found to my needs, but I don't know how to slow the scroller down.
问题是，要容纳我页面中的所有内容，它的高度必须约为17000px.我只希望滚动条滚动到页面底部，然后再滚动回到顶部(中间没有停顿)，但是当单击时，当前滚动条大约需要1秒才能滚动17000px.这意味着您无法阅读显示的任何文本.我希望滚动动画最大速度达到每秒1000像素.我该怎么办?
The problem, is that to accommodate all of the content in my page, it needs to be about 17000px high. I only want the scroller to scroll to the bottom of the page then back to the top (without any stops inbetween), but when clicked it currently takes about 1 second to scroll 17000px. This means you can't read any of the text displayed. I want the scrolling animation to max out at about 1000px per second. How would I do this?
HTML
<div class="background fixed"></div>
<div class="trigger-scroll">></div>
<!-- Sections Id'd 1 through 5 -->
<section id="slide-6" class="homeSlide">
<div class="bcg center fixed"
data-0="top:200%; opacity:0;"
data-16000="top:200%; opacity:1;"
data-17000="top:90%;"
data-end="top:90%;">
<div class="hsContainer">
<div class="center middle">
<h2>View my portfolio!</h2>
<a href="portfolio.html"><img class="portfolio" src="img/r3gamersHome.png"/></a>
</div>
</div>
</div>
</section>
<section id="slide-7" class="homeSlide scroll-here">
<div class="hsContainer">
<div class="hsContent bottom"
>
<h3>TEST</h3>
</div>
</div>
</section>
JavaScript
Javascript
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 2900;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
}
} )( jQuery );
var s = skrollr.init();
s.refresh($('.homeSlide'));
$(document).ready(function() {
/* run scroll to section only
if body has class page-scroller */
var pageScroller = $( 'body' ).hasClass( 'page-scroller' );
if ( pageScroller ) {
// begin homepage scroll to section
var $scrollSection = $('.scroll-here');
var $scrollTrigger = $('.trigger-scroll');
var nextSection = 0;
$scrollTrigger.on( 'click', function() {
$(this).removeClass('go-to-top');
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
// If already scrolled down
// to find next section position so you don't go backwards:
while ( $('body').scrollTop() > $($scrollSection[nextSection]).offset().top ) {
nextSection++;
}
// If next section is the last, add class to rotate arrow:
if (nextSection === ($scrollSection.length - 1)) {
$(this).addClass('go-to-top');
}
// Move to next section and increment counter check:
$( 'html, body' ).animate({ scrollTop: $($scrollSection[nextSection]).offset().top }, 1000);
nextSection++;
});
// end homepage scroll to section
}else{
console.log('page-scroller class was not found in body tag');
}//end if else
});
CSS(可能无关紧要，所以我只添加了最低限度，以防万一)
CSS (probably isn't relevant so i've added only the bare minimum, just in case)
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
.hsContainer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.hsContent {
max-width: 700px;
position: absolute;
}
.hsContent h2 {
color: #fff8de;
padding: 10px 5px;
font-size: 30px;
}
@media screen and (max-height: 400px) {
.hsContent h2 {
font-size: 25px;
}
}
.hsContent h3 {
color: #fff8de;
padding: 10px 5px;
line-height: 20px;
margin-bottom: 5px;
}
@media screen and (max-height: 400px) {
.hsContent h3 {
font-size: 15px;
padding: 5px 2.5px;
margin-bottom: 2px;
}
}
.hsContent h4 {
color: #fff8de;
padding: 10px 5px;
line-height: 15px;
margin-bottom: 5px;
}
@media screen and (max-height: 400px) {
.hsContent h4 {
font-size: 10px;
}
}
.hsContent p {
width: 400px;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.fixed {
position: fixed;
}
.center{
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
.middle {
text-align: center;
margin: 0px;
padding-top: 40px;
width: 100%;
min-width: 300px;
}
@media screen and (max-height: 400px) {
.middle {
padding-top: 15px;
}
}
#slide-6 .bcg {background-color: rgb(208, 208, 208);
top: 100%;
box-shadow: inset 5px 5px 20px black;
}
#slide-6 .hsContent {
top: 0px;
text-align: center;
}
#slide-7 .hsContent {
max-height: 100px;
}
.trigger-scroll {
box-sizing: border-box;
display: inline-block;
border: 1px #f60 solid;
bottom: 20px;
width: 68px;
height: 68px;
position: fixed;
right: 20px;
padding: 16px 20px;
transition: transform 500ms ease-in-out;
z-index: 50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
font-weight: 700;
text-shadow: 0 1px 0 #fff;
color: #fff;
font-family: verdana;
font-size: 2em;
line-height: 1;
cursor: pointer;
border-radius: 3px;
opacity: 0.8;
box-shadow: 1px 0px 1px 1px rgba(102,51,0, .25);
}
@media screen and (max-height: 400px) {
.trigger-scroll {
width: 51px;
height: 51px;
font-size: 1.5em;
padding: 12px 15px;
}
}
.trigger-scroll:hover { background: #f60; border-color: #c30; }
.trigger-scroll.go-to-top {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
推荐答案
在本节的第三行中，更改1000:
In this section's third line, change 1000:
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
到$(document).height()，就像这样:
$('html, body').animate({ scrollTop: 0 }, $(document).height());
这将使动画以每秒约1000像素的速度滚动.
this will make the animation scroll at about 1000 pixels per second.
这篇关于降低Jquery Scroll的速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
