Question

使用scrollify制作一个1页的网站使用部分，问题现在我出于某种原因在进入网站时设置此设置网址http://testsiteclash.co.uk它会自动重定向到显示第2部分的http://testsiteclash.co.uk/#contact，即使section_1被加载到上面？

页面布局为front-page.php，带有html标记，包括两个部分，第二部分有一个内联php include命令。

我在wordpress admin中创建了两个页面并命名为section_1，section_2并在wordpress中为每个创建的页面输入相关代码div id =＆＃34; section_1＆＃34;第一节/ div等......并将其父级设置为front-page.php

提前致谢

奇怪的是我早点工作，关闭开发人员然后重新启动它就像这样？

前page.php文件

    <?php get_header(); ?>
    <article id="section_1">
        <section class='section' data-section-name="devonfoodmovement">
            <div class="container">
                <div class="logo">
                    <div class="logo-image">
                    </div>

                </div>
                <div class="text">
                <h1>Devon Food Movement</h1>
                    <h2>Website under construction <br class="textbreak">follow us below on ...</h2>
                </div>
                <div class="icons">
                    <div class="icon1"><a href="https://www.linkedin.com/in/luke-fearon-853606158/" target="_blank"></a></div>
                    <div class="icon2"><a href="#section_2" class="scrollTo"></a></div>
                    <div class="icon3"><a href="https://www.instagram.com/_u/five_mile_food" target="_blank"></a></div>
                    <div class="icon3m"><a href="instagram://user?username=five_mile_food"></a></div>
                </div>

            </div>
        </section>
    </article>
    <article id="section_2">
        <section class='section' data-section-name="contact">

        <?php 

        include('form.php');

        ?>
        </section>
    </article>
    <div class="home-btn"><a href="#section_1" class="scrollTo"><i class="fas fa-home"></i></a></div>
    </body>
    </html>

custom.js文件，包含一些滚动功能和隐藏第一部分无需显示的按钮的功能

    $(document).ready(function(){

    $(function() {
        $.scrollify({
        section: ".section",
        sectionName : "section-name",
        /*interstitialSection : ".footer-end",*/
        scrollSpeed: 2000

        });
    });

    });

    $.fn.inView = function(inViewType){
    var viewport = {};
    viewport.top = $(window).scrollTop();
    viewport.bottom = viewport.top + $(window).height();
    var bounds = {};
    bounds.top = this.offset().top;
    bounds.bottom = bounds.top + this.outerHeight();
    switch(inViewType){
      case 'bottomOnly':
        return ((bounds.bottom <= viewport.bottom) && (bounds.bottom >= viewport.top));
      case 'topOnly':
        return ((bounds.top <= viewport.bottom) && (bounds.top >= viewport.top));
      case 'both':
        return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));         
      default:     
        return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));        
    }
    };

    $(document).scroll(function(){
    if($('#section_1').inView( 'both' ) == true ){

        $('.home-btn').fadeOut(500).css('display','none');

    }else if($('#section_1').inView( 'both' ) == false ) {

        $('.home-btn').fadeIn(500).css('display','block');

    }

    });

    $(document).ready(function (){
    $(".scrollTo").on('click', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        $('html, body').animate({
        scrollTop: ($(target).offset().top)
    }, 1000);
    });
    });

form.php

        <?php include('form_process.php');
        /*if (isset($_POST['contact-submit'])){

            $url = 'https://www.google.com/recaptcha/api/siteverify';
            $privatekey = "secretkeygoogle";

            $response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADOR']);

            $data = json_decode($response);

            if(isset($data->success) AND $data->success==true) {

            }else{

            }


        }*/

    ?>
    <div class='grey'>
        <div class="container-contact">
            <form id="contact" method="post">
                <div id="column-contact-left">
                <div class='contact-logo'></div>
                <h3>Contact the Devon Food Movement</h3>
                <fieldset>
                    <input placeholder="Your name" type="text" tabindex="1" name="name1" value="<?= $name ?>" autofocus>

                </fieldset>
                <span class="error"><?= $name_error ?></span>
                <fieldset>
                    <input placeholder="Your Email Address" type="text" name="email" value="<?= $email ?>" tabindex="2" >

                </fieldset>
                <span class="error"><?= $email_error ?></span>
                </div>
                <div id="column-contact-right">
                <fieldset>
                    <textarea placeholder="Type your Message Here...." name="message" value="<?= $message ?>" tabindex="3" ></textarea>
                </fieldset>
                <div class="g-recaptcha" data-sitekey="needtoinput" ></div>
                <span class="success"><?= $success; ?></span>
                <fieldset>
                    <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
                </fieldset>
                </div>
            </form>
            </div>

    </div>

Answer 1

页面中有几个问题

一个scrollify插件的类名错误。

两个你在输入类型上设置了自动对焦，这将使浏览器自动滚动到该部分。

当元素在视口中时，您可以使用已编写的inView实用程序函数将焦点设置在输入类型onscroll上。我无法测试这一点。如果这能解决你的目的，你可以告诉我。

  else if($('#section_1').inView( 'both' ) == false ) {
        $('.home-btn').fadeIn(500).css('display','block');          
        $('input[name="name1"]').focus();

    }

单页scrollify.js网站在输入基本网址时正在加载#contact链接

1 个答案: