Jquery Initialize（适合初学者！）

时间：2014-07-01 19:22:25

标签： jquery html

我的smoothscroll有问题。我在单个页面上使用锚点，除了点击的第一个链接之外它一切都很好，它只是跳转到锚点，而不是使用smoothscroll，现在，我对Jquery不好，但我想我需要初始化单击任何内容之前的脚本，而不是在第一次单击时初始化它。任何人都可以帮我这个吗？

我认为这是要使用的，但这引用了什么代码（把你的CODE放在这里）？

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

这是js本身。

/**
 * SmoothScroll
 * This helper script created by DWUser.com.  Copyright 2012 DWUser.com.  
 * Dual-licensed under the GPL and MIT licenses.  
 * All individual scripts remain property of their copyrighters.
 * Date: 10-Sep-2012
 * Version: 1.0.1
 */
if (!window['jQuery']) alert('The jQuery library must be included before the smoothscroll.js file.  The plugin will not work propery.');

/**
 * jQuery.ScrollTo - Easy element scrolling using jQuery.
 * Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * @author Ariel Flesler
 * @version 1.4.3.1
 */
;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);

/**
 * jQuery.LocalScroll
 * Copyright (c) 2007-2010 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 05/31/2010
 * @author Ariel Flesler
 * @version 1.2.8b
 **/
;(function(b){function g(a,e,d){var h=e.hash.slice(1),f=document.getElementById(h)||document.getElementsByName(h)[0];if(f){a&&a.preventDefault();var c=b(d.target);if(!(d.lock&&c.is(":animated")||d.onBefore&&!1===d.onBefore(a,f,c))){d.stop&&c._scrollable().stop(!0);if(d.hash){var a=f.id==h?"id":"name",g=b("<a> </a>").attr(a,h).css({position:"absolute",top:b(window).scrollTop(),left:b(window).scrollLeft()});f[a]="";b("body").prepend(g);location=e.hash;g.remove();f[a]=h}c.scrollTo(f,d).trigger("notify.serialScroll",
[f])}}}var i=location.href.replace(/#.*/,""),c=b.localScroll=function(a){b("body").localScroll(a)};c.defaults={duration:1E3,axis:"y",event:"click",stop:!0,target:window,reset:!0};c.hash=function(a){if(location.hash){a=b.extend({},c.defaults,a);a.hash=!1;if(a.reset){var e=a.duration;delete a.duration;b(a.target).scrollTo(0,a);a.duration=e}g(0,location,a)}};b.fn.localScroll=function(a){function e(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,"")==i&&(!a.filter||b(this).is(a.filter))}
a=b.extend({},c.defaults,a);return a.lazy?this.bind(a.event,function(d){var c=b([d.target,d.target.parentNode]).filter(e)[0];c&&g(d,c,a)}):this.find("a,area").filter(e).bind(a.event,function(b){g(b,this,a)}).end().end()}})(jQuery);

// Initialize all .smoothScroll links
jQuery(function($){ $.localScroll({filter:'.smoothScroll'}); });

HTML - 

<!DOCTYPE html>
<html>
<head>
    <title>The Lantern</title>
    <meta name="description" content=" " />
    <meta name="keywords" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="icon" type="image" href="img/site/favicon.jpg" />
    <link rel="stylesheet" href="css/layout.css"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/smoothscroll.js"></script> 

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(52.076848, 4.275590);
  var mapOptions = {
    zoom: 16,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'The Lantern'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>
<body>

<div id="fix" class="noIbar">
<div class="nav">
<ul>
<li><a class="smoothScroll" id="dot" href="index.html#home">.</a></li>
<li><a class="smoothScroll" href="index.html#info">Info</a></li>
<li><a class="smoothScroll" href="index.html#events">Events</a></li>
<li><a class="smoothScroll" href="index.html#menus">Menu's</a></li>
<li><a class="smoothScroll" href="index.html#contact">Contact</a></li>
</ul>
</div>
</div>

<div id="home">
<img class="logo" src="img/site/thelantern.png" width="40%"/>

<a id="social" href="http://www.facebook.com/thelanternthehague" target="_blank"><img src="img/site/fb.png" width="100%"/></a>

</div>

<div id="info">
<div class="inner1">
<div class="paraleft">
<h1 class="h1">Info</h1>
<p>
<br/>
The Lantern is a friendly neighbourhood cafe for locals and expats alike, we opened our doors in mid May and are busy welcoming new faces every day for evening drinks, tasty food or just a relaxed cup of coffee. Families with children are welcome, as are well behaved dogs.
We offer the possibility to book our cafe for larger groups or special occasions, if you are looking for somewhere to gather for regular meetings or to throw a (dinner) party please <a class="smoothScroll" href="index.html#contact">contact us</a>
</p>
</div>

<img class="time" src="img/site/time.jpg"/>


<div class="picright">
<img src="img/site/lady.jpg" height="100%" width="100%"/>
</div>
</div>
</div>

<div id="events">
<div class="inner1">
<div class="pararight">
<h1 class="h1">Events</h1>
<p>
<br/>
The Lantern is a friendly neighbourhood cafe for locals and expats alike, we opened our doors in mid May and are busy welcoming new faces every day for evening drinks, tasty food or just a relaxed cup of coffee. Families with children are welcome, as are well behaved dogs.
We offer the possibility to book our cafe for larger groups or special occasions, if you are looking for somewhere to gather for regular meetings or to throw a (dinner) party please contact us
</p>
</div>
<div class="picleft">
<img src="img/site/piano.jpg" height="100%" width="100%"/>
</div>
</div>
</div>

<div id="menus">
<div class="inner1">
<div class="paraleft">
<h1 class="h1">Menus</h1>
<p>We offer a range of international food and drink.</p>
<a target="_blank" href="pdf/menu.pdf">Food</a>
</div>

<div class="picright">
<img src="img/site/coffee.jpg" height="100%" width="100%"/>
</div>
</div>
</div>

<div id="contact">
<div class="inner2">
<div id="contactcontain">
    <div id="map_canvas"></div>

<form id="contactform" method="POST" action="php/contact.php">
<input class="equal" type="text" name="name" autocomplete="on" placeholder="Name"><br/><br/>
<input class="equal" type="email" name="email" autocomplete="on" placeholder="Email Address"><br/><br/>
<input class="hide" type="email" name="fake">
<textarea class="equaltall" type="text" name="message" placeholder="Message"></textarea><br/>
<input type="checkbox" name="news">Sign up for newsletter<br/><br/>
<input class="button" type="submit" value="Send">
</form>

</div>
</div>
</div>


</body>
</html>

1 个答案:

答案 0 :(得分：0)

与http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/一起，我得出结论

$(document).ready(function() {
    //Put your code here
});
已经包含

- 缩写形式（同时包含noConflict模式）：

jQuery(function($){
// Your jQuery code here, using the $
});

如上面的最后一行代码

// Initialize all .smoothScroll links
jQuery(function($){ $.localScroll({filter:'.smoothScroll'}); });

说您点击问题的原因必须在其他地方..

你的html是什么样的？

相关问题
最新问题