单击链接时水平滚动答案

【问题标题】：Horizontal Scrolling when click on link单击链接时水平滚动
【发布时间】：2014-08-29 06:33:37
【问题描述】：

我创建了一个水平滚动的网页 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

【问题讨论】：

你想说什么？
当我点击链接时，这将动画但不会转到 div ..
你想要一个横向的网页吗？显示点击页面内容？您可能需要将页面内容放在 div 中并通过 CSS 隐藏它们。然后单击菜单选项时，通过 jquery 显示它们
当我点击链接时是的
不，我不想滚动显示或隐藏

标签： javascript jquery html css horizontal-scrolling

【解决方案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;
});

【讨论】：

我将答案更新为 scrollTop 和 position().left 而不是 offset()

【解决方案2】：

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

与其尝试使用通常用于垂直滚动的内部链接，您介意在单击带有内部 div 宽度参数的 div 链接上调用 JinvertScroll 函数吗？

【讨论】：

darf.t15.org 你可以在这里查看整个页面
类似。尝试使用 Firebug 并选择 div2、3 或 4。它们都在视线范围内。您是否尝试过使用 Invertscroll 插件？