可以'我没有在我的网站上实现Jquery Scrollify

Can't implement Jquery Scrollify on my website

本文关键字：网站 我的 实现 Scrollify Jquery 可以      更新时间：2023-09-26

我正试图在我的网站上设置JQuery Scrollify，以便从一个部分平滑滚动到另一个部分，但无法正常工作！我尝试了不同的方法，认为我可能只是错过了什么？我想我可能没有正确地实现脚本，或者没有给这些部分提供好的类名。。或者可能是因为我在使用Bootstrap？？

这里需要帮助！！非常感谢！

这是我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>...</title>
        <link href="css/magicledger.css" rel="stylesheet" type="text/css">
        <link href="css/normalize.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap.min.css" rel="stylesheet">
    <script>
    $(function() {
 $(".section").css({"height":$(window).height()});
  $.scrollify({
    section:".section"
  });

  $(".scroll").click(function(e) {
    e.preventDefault();
    $.scrollify("move",$(this).attr("href"));
  });
});
        </script>
</head>
<body>
        <section class="section section1">
        <header class="jumbotron vertical-center">
            <div class="container">
                <h1>...</h1>
                <h3>...</h3>
            <script type="text/javascript">
          window.Maitre = { uuid: "MF301766dea0" };
  </script>
  <script data-maitre src='https://maitreapp.co/widget.js' async></script> 
            </div>    
        </header>
    </section>

 <div class="container-fluid">
     <section class="section section2">
     <div class="row"> <!------- Row 1 ----->
         <div class="col-md-6">
             <div class="inside-row">
            <img src="icons/animat-bezier-color-2.gif" alt="icon1">
             </div>
         </div>
         <div class="col-md-6">
            <div class="inside-row">
                <h3>...</h3>
                <p>...</p>
            </div>
         </div>
     </div>
     </section>
     <section class="section section3">
        <div class="row"> <!-- Row 2 -------->
            <div class="col-md-6">
                <div class="inside-row">
                <img src="icons/animat-layers-color-2.gif" alt="icon2"> 
                </div>
            </div>
            <div class="col-md-6">
                <div class="inside-row">
                    <h3>...</h3>
                    <p>...</p>
                </div>
            </div>
        </div> 
     </section>
     <section class="section section3">
        <div class="row"> <!-- Row 3 ---------->
            <div class="col-md-6">
                <div class="inside-row">
                <img src="icons/animat-network-color-2.gif" alt="icon3">
                </div>
            </div>
            <div class="col-md-6">
                <div class="inside-row">
                    <h3>...</h3>
                    <p>...</p>
                </div>
            </div>
        </div>
     </section>
</div> <!-- ENd of container fluid ------>

和我的javascript外部表单：

jQuery(document).ready(function($) {
$.scrollify({
        section : ".section-class-name",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: true,
        before:function() {},
        after:function() {},
        afterResize:function() {},
        afterRender:function() {}
    });

您将.js文件包括在哪里？在加载jquery和scrollify之前，您可能正在页面的头部运行javascript。

在页面上运行任何javascript或将javscript移动到.js文件中之前，请在头中加载所有.js文件。

您可能需要在HTML body元素中添加<script src="script/jquery-2.2.1.min.js"></script>。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js">< /script>

将此右侧粘贴到<head>标签

下
相关文章：