Question

我创建了一个水平滚动的网页 http://www.pixxelfactory.net/jInvertScroll/

但现在我创建一个菜单栏，当我点击菜单栏时，我将向左滚动到div 我的代码是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>The Hot Air Balloon</title>
    <!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css" /> -->
    <link rel="stylesheet" href="css/jInvertScroll.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" >
      function changeonhover(a)
      {



        for(var i =1 ;i<=4;i++)
        {
          if(i==a)
          {
            document.getElementById("link"+i).style.color = "blue";

          }
          else
          {
            document.getElementById("link"+i).style.color = "white";

          }

        }
      }
    </script>
    <style type="text/css">
      #header {
        position: fixed;
        top: 0;
        z-index: 500;
        height: 45px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <a href="#div1"  id="link1"  >Div1 </a>
      <a href="#div2" id="link2" >Div2 </a>
      <a href="#div3" id="link3" >Div3 </a>
      <a href="#div4" id="link4" >Div4 </a>

    </div>
    <div class="container">

      <!--<div class="horizon scroll">
<img src="images/background.png" alt="" />
</div>

<div class="middle scroll">
<img src="images/cloudsandballoons.png" alt="" />
</div>
<div class="panel1">
-->

      <div class="front scroll">
        <h1 class="intro">Scroll down</h1>

        <div id="div1" onmouseover="changeonhover('1')" class="panel1 page">
          <h2>The Hot Air Balloon</h2>
          <p>
            The hot air balloon is the oldest successful human-carrying flight technology. It is part of a class of aircraft known as balloon aircraft.
          </p>
          <p>
            On November 21, 1783, in Paris, France, the first untethered manned flight was performed by Jean-François Pilâtre de Rozier and François Laurent d'Arlandes in a hot air balloon created on December 14, 1782 by the Montgolfier brothers. Hot air balloons that can be propelled through the air rather than just being pushed along by the wind are known as airships or, more specifically, thermal airships.
          </p>
        </div>

        <div id="div2" onmouseover="changeonhover('2')" class="panel2 page">
          <h2>How they work</h2> 
          <p>A hot air balloon consists of a bag called the envelope that is capable of containing heated air. Suspended beneath is a gondola or wicker basket (in some long-distance or high-altitude balloons, a capsule), which carries passengers and (usually) a source of heat, in most cases an open flame. 
          </p>
          <p>
            The heated air inside the envelope makes it buoyant since it has a lower density than the relatively cold air outside the envelope. 
          </p>
        </div>

        <div id="div3" onmouseover="changeonhover('3')" class="panel3 page">
          <h2>Practicalities</h2>
          <p>As with all aircraft, hot air balloons cannot fly beyond the atmosphere. Unlike gas balloons, the envelope does not have to be sealed at the bottom since the air near the bottom of the envelope is at the same pressure as the air surrounding. 
          </p>
          <p>
            For modern sport balloons the envelope is generally made from nylon fabric and the inlet of the balloon (closest to the burner flame) is made from fire resistant material such as <a href="http://en.wikipedia.org/wiki/Nomex">Nomex</a>. </p>
        </div>

        <div id="div4" onmouseover="changeonhover('4')" class="panel4 page">
          <h2>Modern ballooning</h2>
          <p>
            Beginning during the mid-1970s, balloon envelopes have been made in all kinds of shapes, such as rocket ships and the shapes of various commercial products, though the traditional shape remains popular for most non-commercial, and many commercial, applications.
          </p>
        </div>
      </div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <script type="text/javascript" src="http://www.pixxelfactory.net/jInvertScroll/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.offset().top
            }, 900, 'swing', function () {
              window.location.hash = target;
            });
          });
        });
      </script>
    </body>
  </html>

但是当我点击链接时我无法正常工作。请帮帮我

Link

Answer 1

你应该改变这个

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});

对此（您希望顶部值更改为左侧位置值。所以scrollTop和position（）。left

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

Answer 2

在你的小提琴上，内容div都在同一个“位置”，所以当你点击链接时它不会做任何事情，因为每个div都已经看到了。

而不是尝试使用通常用于垂直滚动的内部链接，您是否介意尝试调用JinvertScroll函数单击div链接并使用内部div的宽度参数？

单击链接时水平滚动

2 个答案: