Question

我有一个具有“向下滚动”功能的目标网页。此功能的代码取自this codepen example（向下滚动按钮＃5）。

我的目标网页如下：

现在，当您点击“滚动”时，您会立即进入此点（没有平滑过渡）：

当你应该一直走到这一点时（平滑过渡+标题触及窗口/屏幕的顶部）：

那么我需要在JavaScript中修复什么才能使其滚动到正确的位置？这就是我所拥有的：

//javascript functions
(function ($, root, undefined) {    
$(function () { 
    'use strict';       
    // DOM ready, take it away      
}); 
})(jQuery, this);

//scroll down function
(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}, 500, 'linear');
});
})(jQuery);

我已尝试调整此行中的数字：scrollTop: $("#menu-main").offset().top - 6}, 1700);，6和1700，但没有效果。

还尝试取消注释最后一行并将500更改为其他数字而不起作用。

这是首页的HTML，包括导航菜单（标题）：

<!DOCTYPE html>
<html lang="en">
<head>  
    <meta charset="utf-8">
    <title>The Bullshit Collection</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <?php wp_head();?>
</head>
<body>
<!--start container-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg">
<div class="welcome-page-div">
<h3>Welcome</h3>
</div>

<div class="welcome-page-div">
<h3>To the Bullshit Collection</h3>
</div>

<section id="section5" class="demo">
    <a href="#section5"><span></span>Scroll</a>
</section>
</div>

<div id="menu-main" class="header-background">
<!--<div class="cursive"><a href="http://thebullshitcollection/home/">The Bullshit Collection</a></div> -->
<!--grabs first menu available-->
<!-- <div class="menu-main-navigation-container"> -->
    <center>
    <ul id="menu-main-navigation" class="menu container-1">
        <li id="menu-item-49" class=" cursive menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-50"><a id="logo" href="http://thebullshitcollection/">The Bullshit Collection</a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-50"><a href="http://thebullshitcollection/">Home</a></li>
        <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://thebullshitcollection/about/">About</a></li>
        <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://thebullshitcollection/drawings/">Drawings</a></li>
        <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://thebullshitcollection/photography/">Photography</a></li>
        <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://thebullshitcollection/store/">Store</a></li>
    </ul>
    </center>
<!--</div> -->
</div>

<div id="stickyalias"></div>

很难为此创建一个JSFiddle，因为它是一个WordPress站点，我正在使用<?php wp_head();?>来获取标题，这是导航菜单所在的位置。让我知道我还能提供多少帮助，谢谢！

编辑：这是我正在尝试复制的一个很好的例子：http://yoyomoi.com/

Answer 1

这是用于向下滚动的代码：

//scroll down
jQuery(document).ready(function ($) {
$('#section5').click(function (e) {
    e.preventDefault();
    $('html, body').animate({
    scrollTop: $("#menu-main").position().top
    }, 2000);
    });
});

2000控制速度......较低的数字越快，数字越高越慢。需要＆＃34;＃section5＆＃34;在第一组括号中，这是起点。 #menu-main是终点。如果有人理解其余代码，请解释。

Answer 2

滚动的Ur id与目标相同吗？

<section id="section5" class="demo">
    <a href="#section5"><span></span>Scroll</a>
</section>

这就是你写的让我解释一下这是如何工作的

<a href ="#something"></a>
你要滚动到something = "name of id"的地方所以该部分本身有id="section5"这意味着它的目标是将滚动按钮置于顶部而不是我们想要的

是的.....我们将id更改为相关的内容

<section id="scrollButton" class="demo"> 
<a href="#section5"><span></span>Scroll</a> 
</section>

我们想滚动的地方????到标题因此，我们将a标记目标指向菜单

<a href= "#menu-main"><span></span>Scroll</a>

将解决它

“向下滚动”JavaScript功能无法滚动以纠正位置

2 个答案: