Question

我的Javascript与我的HTML无法通信。我正在尝试使用scrollto函数，但似乎我的javascript和HTML之间的连接有问题。

使用Javascript：

$('a[href^="#"]').on('click', function(event) {
    var target = $(this.href);
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 10000);
    }
});

HTML：

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="parallax.js"></script>
        <script type="text/javascript" src="scrollto.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="favicon.png" type="image/gif" sizes="16x16">
        <title></title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
 </head>

Answer 1

因为您需要在body标记的末尾加载scrollto脚本，以确保加载DOM。否则，您可以将代码包装在

中

$(document).ready(function(){
   //your code here
});

或使用排序版

$(function() {
    //your code here
});

Answer 2

你可以试试这个：

$('body').on('click', 'a[href^="#"]', function (event) {
  var target = $(this.href);
  if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top
    }, 10000);
  }
});

您可以使用DOM中加载的任何父选择器替换body。

Javascript没有加载

2 个答案: