JavaScript - “向下滚动”按钮 - 从登陆页滚动到标题顶部 [英] JavaScript - "Scroll Down" Button - Scroll From Landing Page to Top of the Header
问题描述
我使用的是与此处使用的向下滚动相同的方法：
到这里（这是目前正在发生的事情）：
我们希望向下滚动按钮使我们到达页眉顶部触及浏览器窗口顶部的位置（如下所示）：
这是我目前在我的JS文件中的内容：
<$ （函数（$，root，undefined）{
$（function（）{
） '严格使用';
// DOM准备好了，拿走它
}）;
}）（jQuery，this）;
//着陆页文本延迟
window.onload = function（）{
$（p）。each（function（index）{
$（这个）.css（{
'animation-delay'：（index + 1）* .7 +'s'
}）;
}）;
}
//滚动到顶部函数，在这里找到：
http://plnkr.co/edit/DCnukHPNWa6Z1zOX53xp?p=preview
//滚动到top（linear）
function scrollToTop（scrollDuration）{
var scrollStep = -window.scrollY /（scrollDuration / 15），
scrollInterval = setInterval（function（）{
if（ window.scrollY！= 0）{
window.scrollBy（0，scrollStep）;
}
else clearInterval（scrollInterval）;
}，15）;
}
//滚动到顶部（轻松进出）
函数scrollToTop（scrollDuration）{
const scrollHeight = window.scrollY，
scrollStep = Math.PI /（scrollDuration / 15），
cosParameter = scrollHeight / 2;
var scrollCount = 0，
scrollMargin，
scrollInterval = setInterval（function（）{
if（window.scrollY！= 0）{
scrollCount = scrollCount + 1 ;
scrollMargin = cosParameter - cosParameter * Math.cos（scrollCount * scrollStep）;
window.scrollTo（0，（scrollHeight - scrollMargin））;
}
else clearInterval（scrollInterval ）;
}，15）;
$ b $ //向下滚动
（函数（$）{
$（'a [href * =＃]'）。on（'click'，函数（e）{
console.log（$（。container）。offset（）。top）
e.preventDefault（）;
$（'html，body'）。 animate {{
scrollTop：$（＃menu-main）。offset（）。top - 6}，1700）;
// $（'html，body'）。animate（{scrollTop ：
$（$（this）.attr（'href'））。offset（）。top}，900，'linear'）;
}）;
}）（jQuery） ; $（'a [href * =＃]'）。on（'click'，function（e）{
e.preventDefault（
$ b $） ）;
$（'html，body'）。animate {{scrollTop：
$（$（this）.attr（'href'））。offset（）。top}，500，'linear '）;
}）;
}）;
window.onload =（函数（$）{
$（function（）{
//检查粘贴标题的初始位置
var stickyHeaderTop = $ （'＃menu-main'）。offset（）。top;
$（window）.scroll（function（）{
if（$（window）.scrollTop（）> = $ stickyHeaderTop）{
$（'＃menu-main'）。css（{
position：'fixed'，
width：'100％'，
top：'0px '，
'z-index'：99999，
height：'45px'
}）;
$（'＃menu-main-navigation'）。css（'margin -top'，'-7px'）;
$（'＃logo'）。css（{
'font-size'：'40px'，
'margin-top'：' -20px'
}）;
$（'＃stickyalias'）。css（'display'，'block'）;
} else {
$（'＃menu-main-navigation'）。css（'margin-top'，'0'）;
$（'＃logo'）。css（{
'font-size'：'50px'，
'margin-top'：'-15px'
}）;
$（'＃menu-main'）。css（{
position：''，
top：''，
'z-index'：0，
height：'57px'
}）;
$（'＃stickyalias'）。css（'display'，'none'）;
}
}）;
}）;
}）（jQuery）
你可以看到我已经有了多种滚动功能页面的顶部（ scrollToTop ），我想我可以使用相同类型的逻辑向下滚动。由于我当前的 scrollDown 函数工作不正常，我试着将它注释掉，而不是写下这样的内容：
//向下滚动（缓进和退出）
函数scrollToHeader（scrollDuration）{
const scrollHeight = window.scrollY，//从向下滚动按钮到头部的顶部
scrollStep = Math.PI /（scrollDuration / 15），
cosParameter = scrollHeight / 2;
var scrollCount = 0，
scrollMargin，
scrollInterval = setInterval（function（）{
if（window.scrollY！= 0）{
scrollCount = scrollCount + 1 ;
scrollMargin = cosParameter - cosParameter * Math.cos（scrollCount * scrollStep）;
window.scrollTo（0，（scrollHeight - scrollMargin））;
}
else clearInterval（scrollInterval ）;
}，15）;
}
然后我将该函数应用于HTML中的滚动按钮：
< section id =section5class =demo>
< a href =＃section5>< span onclick =scrollToTop（1000）;>< / span>< / a>
< / section>
但是当我尝试这个时，它会导致滚动按钮移动到页面的左侧，它实际上让我起而不是失望 - 所以我重新评论了我的JS中的函数，并摆脱了我在我的HTML（header-front-page.php）中所做的更改。您可以在 thebullshitcollection.com 上查看它目前的工作情况。在此先感谢您的帮助/建议。
编辑：我之前列出的其他函数中，此函数已添加到我的JS文件中：
jQuery（document）.ready（function（$）{
$（'＃section5'）。click（function（e）{
。e.preventDefault（）;
$（'html，body'）。animate（{
scrollTop：$（＃menu-main）。position（）。top
}， 1000）;
}）;
}
你的链接的目标是＃section5 它应该是＃menu-main
希望这会有帮助。
编辑
如果您想滚动试试这个
$（'＃section5'）。click（function（e）{
e.preventDefault（）;
$（'html （
scrollTop：$（＃menu-main）。position（）。top
}，1000）;
}）;
SYA：）
I'm using the same "scroll down" method that's being used here:
https://codepen.io/nxworld/pen/OyRrGy
Of course, the JavaScript in that example doesn't take you to a specific place on the page - it just takes you to the next section. What I'm trying to do is, instead of the "scroll down" button taking us from here:
to here (this is what's happening currently):
we want the scroll down button to take us to where the top of the header touches the top of the browser's window (like this):
Here is what I currently have in my JS file:
//javascript functions
(function ($, root, undefined) {
$(function () {
'use strict';
// DOM ready, take it away
});
})(jQuery, this);
//landing page text delay
window.onload = function() {
$("p").each(function(index) {
$(this).css({
'animation-delay': (index + 1) * .7 + 's'
});
});
}
//scroll to top functions, found here:
http://plnkr.co/edit/DCnukHPNWa6Z1zOX53xp?p=preview
//scroll to top (linear)
function scrollToTop(scrollDuration) {
var scrollStep = -window.scrollY / (scrollDuration / 15),
scrollInterval = setInterval(function(){
if ( window.scrollY != 0 ) {
window.scrollBy( 0, scrollStep );
}
else clearInterval(scrollInterval);
},15);
}
//scroll to top (ease in and out)
function scrollToTop(scrollDuration) {
const scrollHeight = window.scrollY,
scrollStep = Math.PI / ( scrollDuration / 15 ),
cosParameter = scrollHeight / 2;
var scrollCount = 0,
scrollMargin,
scrollInterval = setInterval( function() {
if ( window.scrollY != 0 ) {
scrollCount = scrollCount + 1;
scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
}
else clearInterval(scrollInterval);
}, 15 );
}
//scroll down
(function($) {
$('a[href*=#]').on('click', function(e) {
console.log( $(".container").offset().top)
e.preventDefault();
$('html,body').animate({
scrollTop: $("#menu-main").offset().top - 6}, 1700);
//$('html, body').animate({ scrollTop:
$($(this).attr('href')).offset().top}, 900, 'linear');
});
})(jQuery);
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop:
$($(this).attr('href')).offset().top}, 500, 'linear');
});
});
window.onload =(function($) {
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#menu-main').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() >= stickyHeaderTop ) {
$('#menu-main').css({
position: 'fixed',
width: '100%',
top: '0px',
'z-index': 99999,
height: '45px'
});
$('#menu-main-navigation').css('margin-top', '-7px');
$('#logo').css({
'font-size':'40px',
'margin-top': '-20px'
});
$('#stickyalias').css('display', 'block');
} else {
$('#menu-main-navigation').css('margin-top', '0');
$('#logo').css({
'font-size': '50px',
'margin-top': '-15px'
});
$('#menu-main').css({
position: '',
top: '',
'z-index': 0,
height: '57px'
});
$('#stickyalias').css('display', 'none');
}
});
});
})(jQuery)
You can see that I already have multiple functions for scrolling to the top of the page (scrollToTop) and I figure I can use the same kind of logic to scroll down. Since my current scrollDown function isn't working properly, I tried to comment it out and instead write something like this:
//scroll down (ease in and out)
function scrollToHeader(scrollDuration) {
const scrollHeight = window.scrollY, //distance from scroll down button to the top of the header
scrollStep = Math.PI / ( scrollDuration / 15 ),
cosParameter = scrollHeight / 2;
var scrollCount = 0,
scrollMargin,
scrollInterval = setInterval( function() {
if ( window.scrollY != 0 ) {
scrollCount = scrollCount + 1;
scrollMargin = cosParameter - cosParameter * Math.cos (scrollCount * scrollStep);
window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
}
else clearInterval(scrollInterval);
}, 15 );
}
Then I applied that function to the scroll button in the HTML:
<section id="section5" class="demo">
<a href="#section5"><span onclick="scrollToTop(1000);"></span></a>
</section>
But when I tried this it caused the scroll button to shift to the left side of the page, and it actually took me up instead of down - so I re-commented out the function in my JS and got rid of the changes I made in my HTML (header-front-page.php). You can see how it currently works at thebullshitcollection.com. Thanks in advance for your help / suggestions.
EDIT: among other functions that I previously listed, this function has been added to my JS file:
jQuery(document).ready(function ($) {
$('#section5').click(function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#menu-main").position().top
}, 1000);
});
}
The target of your link is #section5 it should be #menu-main
Hope this helps.
EDIT
If you want to scroll try this
$('#section5').click(function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#menu-main").position().top
}, 1000);
});
SYA :)
这篇关于JavaScript - “向下滚动”按钮 - 从登陆页滚动到标题顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
