Question

我正在开发一个带有水平滚动的页面，如果我点击一个链接，html视图将滚动到左边的指定div，但问题是当我点击一个链接时，Home，About我们或产品，div已滚动，但部分div附带第二个div类似于＆＃34;关于我们＆＃34;进来＆＃34;产品＆＃34; div

Demo

和代码是

<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dynakode- GPS vehicle tracking System India, GPS Trackers, Fleet Management solutions</title>
    <meta name="description" content="Dynakode provide GPS based Vehicle Tracking System and provides accurate location of your Vehicle." />
    <meta name="keywords" content="gps, vehicle tracking, fleet management, tracking unit, theft protection, vehicle tracking, mobile tracking, vehicle theft, track india, track car, gps auto faremeter, gps software, dimts delhi, dynakode, geofencing,gps dimts, g-71 dimts, gps dealers, gps vehicle tracking, fleet management" />
    <meta itemprop="name" content="Dynakode" />
    <meta itemprop="description" content="Complete GPS/GPRS vehicle tracking solution in NCR India. Visit us at http://track.dynakode.com for more." />
    <meta itemprop="image" content="http://track.dynakode.com/static/images/logo.png" />
    <meta name="robots" content="INDEX/FOLLOW">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

    <link href="css/jInvertScroll.css" rel="stylesheet" type="text/css" />
</head>
<body class="inner">

    <!--[Headeer]-->
    <header>
        <div class="content">
            <?php
            include './template/header.php';
            ?>
        </div>
    </header>

    <section id="slideshow" style="margin-top:100px;">
        <?php
        include './template/slide.php';
        ?>
    </section>
    <!--[/Slideshow]--> 
    <!--[Container]-->
    <div class="container">
        <!--[/Headeer]--> 
        <!--[Slideshow]-->
        <?php include './template/slide_login.php'; ?>
        <div class="front scroll">
            <div id="home" class="test">

            </div>
            <div id="aboutus" class="test">

            </div>
            <div id="products" class="test">

            </div>
            <div id="soluation" class="test">

            </div>
        </div>
    </div>
    <footer>
        <?php
        include './template/footer.php';
        ?>
    </footer>  
    <!--[/Footer]-->
    <script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>
    <script type="text/javascript" src="js/responsiveslides.min.js"></script>
    <script type="text/javascript" src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
    <script type="text/javascript" src="js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <?php
    include './template/analyticstracking.php';
    ?>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.jInvertScroll.js"></script>
    <script type="text/javascript">
        (function($) {
            $.jInvertScroll(['.scroll']);
        }(jQuery));

    </script>
    <script  type="text/javascript">
        $(document).ready(function() {
            $('a[href^="#"]').on('click', function(e) {
                e.preventDefault();

                var target = this.hash,
                        $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.position().left
                }, 1000, 'swing', function() {
                    window.location.hash = target;
                });
            });
        });
    </script>
</body>
</html>

滚动脚本

  <script  type="text/javascript">
            $(document).ready(function() {
                $('a[href^="#"]').on('click', function(e) {
                    e.preventDefault();

                    var target = this.hash,
                            $target = $(target);

                    $('html, body').stop().animate({
                        'scrollTop': $target.position().left
                    }, 1000, 'swing', function() {
                        window.location.hash = target;
                    });
                });
            });
        </script>

单击链接并滚动到特定div

0 个答案: