Question

所以我试图实现的是标题所说的。到目前为止，我已经经历了很多线程和网站，但是无法让它运转起来。

当他们有足够的时间滚动可编辑时，我可以看到不同的脚本工作。它只是不能平滑滚动，它会在那段时间后跳转到锚点。

我目前使用的是：

/*
//TRIAL 1
$(document).ready(function(){
  console.log("loaded");
  $.getJSON(url, function(json){
    var fahrenheit = true;
    getLocation(json);
    getTemperature(fahrenheit, json);
    $("#unit").on("click", function(){
      fahrenheit = !fahrenheit;
      getTemperature(fahrenheit, json);
    });
    getWeather(json);
  });
});

//Gets current weather conditions from current_observation
function getWeather(json){
  var currWeather = "";
  var iconURL = "";
  currWeather=json.current_observation.weather;
  iconURL=json.current_observation.icon_url;
  $("#icon").attr("src", iconURL);
  $("#weather").html(currWeather);      
};

//Gets current temperature from current_observation  
function getTemperature(fahrenheit, json){
  var currTemp = 0;
  if(fahrenheit){
    currTemp+=json.current_observation.temp_f;
    currTemp+="&#8457";
  } else{
    currTemp+=json.current_observation.temp_c;
    currTemp+="&#8451";
  }
  $("#temperature").html(currTemp);
};

//Gets city, state, country, zip, latitude, and longitude from location
function getLocation(json){
  var currLocation=["city", "state", "country", "zip", "lat", "lon"];
  var locationHTML = "";
  currLocation[0] = json.location.city;
  currLocation[1] = json.location.state;
  currLocation[2] = json.location.country_name;
  currLocation[3] = json.location.zip;
  currLocation[4] = json.location.lat;
  currLocation[5] = json.location.lon;
  locationHTML += currLocation[0]+", "+currLocation[1]+", "+currLocation[2]+" " +currLocation[3]+"<br>";
  locationHTML += "Latitude: "+currLocation[4]+"<br>Longitude: "+currLocation[5];
  $("#location").html(locationHTML);
};
*/

//TRIAL 2

$(document).ready(function(){
  console.log("loaded");
  dispWeather(); 
});

function dispWeather(){
  console.log("inside dispWeather");
  //Retrieve json from weather underground
  var url = "https://api.wunderground.com/api/19c5c96f0b140c0f/geolookup/conditions/q/autoip.json";
  $.getJSON(url, function(json){
    console.log("Got JSON");
    console.log(json);
    var fahrenheit = true;
    getLocation(json);
    getTemperature(fahrenheit, json);
    $("#unit").on("click", function(){
      fahrenheit = !fahrenheit;
      getTemperature(fahrenheit, json);
    });
    getWeather(json);

    //Gets current weather conditions from current_observation
    function getWeather(json){
      var currWeather = "";
      var iconURL = "";
      currWeather=json.current_observation.weather;
      iconURL=json.current_observation.icon_url;
      $("#icon").attr("src", iconURL);
      $("#weather").html(currWeather);      
    };

    //Gets current temperature from current_observation  
    function getTemperature(fahrenheit, json){
      var currTemp = 0;
      if(fahrenheit){
        currTemp+=json.current_observation.temp_f;
        currTemp+="&#8457";
      } else{
        currTemp+=json.current_observation.temp_c;
        currTemp+="&#8451";
      }
      $("#temperature").html(currTemp);
    };

    //Gets city, state, country, zip, latitude, and longitude from location
    function getLocation(json){
      var currLocation=["city", "state", "country", "zip", "lat", "lon"];
      var locationHTML = "";
      currLocation[0] = json.location.city;
      currLocation[1] = json.location.state;
      currLocation[2] = json.location.country_name;
      currLocation[3] = json.location.zip;
      currLocation[4] = json.location.lat;
      currLocation[5] = json.location.lon;
      locationHTML += currLocation[0]+", "+currLocation[1]+", "+currLocation[2]+" " +currLocation[3]+"<br>";
      locationHTML += "Latitude: "+currLocation[4]+"<br>Longitude: "+currLocation[5];
      $("#location").html(locationHTML);
    };
  })
};

我根本不知道从哪里开始。我没有这方面的经验，我只是一个业余爱好者。任何帮助表示赞赏。

我的网站运行在Raspberry PI和Apache2上。

Answer 1

您忘记将您的班级名称scroll添加到您希望平滑滚动的前三个锚标记

  <li><a href="#1" class="scroll">Tervetuloa</a></li>
    <li><a href="#2" class="scroll">Sivupohjia</a></li>
    <li><a href="#3" class="scroll">Tilaa sivut</a></li>

下面的代码段

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var hashTagActive = "";
      $(".scroll").click(function(event) {
        if (hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
          event.preventDefault();
          //calculate destination place
          var dest = 0;
          if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
          } else {
            dest = $(this.hash).offset().top;
          }
          //go to destination
          $('html,body').animate({
            scrollTop: dest
          }, 2000, 'swing', function() {
            hashTagActive = "";
          });
          hashTagActive = this.hash;
        }
      });
    });
  </script>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navbar">
    <ul>
      <li><a href="#1" class="scroll">Tervetuloa</a></li>
      <li><a href="#2" class="scroll">Sivupohjia</a></li>
      <li><a href="#3" class="scroll">Tilaa sivut</a></li>
      <li><a href="etusivu.html#4">Linkki</a></li>
      <li><a href="etusivu.html#5">Linkki</a></li>
      <li><a href="etusivu.html#6">Linkki</a></li>
      <li><a href="etusivu.html#7">Linkki</a></li>
      <li><a href="etusivu.html#8">Linkki</a></li>
      <li><a href="etusivu.html#9">Linkki</a></li>
      <li><a href="etusivu.html#10">Linkki</a></li>
    </ul>
  </div>
  <div class="container">
    <div class="wrapper">
      <div class="content_primary">
        <a name="1" id="1"></a>
        <h3>Tervetuloa</h3>
        <p>Tekstiä</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="content_secondary">
        <a name="2" id="2"></a>
        <h3>Sivupohjia</h3>
        <p>Tulossa</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="content_primary">
        <a name="3" id="3"></a>
        <h3>Tilaa</h3>
        <p>Tekstiä</p>
      </div>
    </div>
  </div>
  <div class="footer">
    <p>&copy;&nbsp;Marko&nbsp;Ahola</p>
  </div>
</body>

</html>

＆＃13;

滚动以锚定JS无法正常工作

1 个答案: