2

Ariel Flesler の scrollTo プラグインをブートストラップで使用しています。それは本当に簡単に見えますが、私はそれを機能させることができません。ボタンをクリックすると、それぞれの ID までスムーズにスクロールします。1 つのボタンの例を次に示します。

html は次のとおりです。

<a class="btn btn-primary" href="#faqs"></i>FAQS</a>

<div class="id="faqs">



<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>

Qn. 1すべてのボタンが機能するようにするには、jQuery はどうあるべきですか?

Qn. 2ちなみに、私は twitter ブートストラップのウェブサイト "application.js" から盗み出しました。これらのコードの意味を説明していただけますか?

//Is this bit of code the convention to add to the start of every jQuery doc?
!function ($) {
$(function(){
var $window = $(window)

//What does this do?
$('[href^=#]').click(function (e) {
  e.preventDefault()
})


//This code scrolls smoothly to top, however it only works when the code below is present. Why?
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
})


// This is the weird bit of code I don't understand. Without this, my scrollTop doesn't work. Could this bit of code also interfere with scrollTo's plugin? I assume it will...
$('.download-btn .btn').on('click', function () {

  var css = $("#components.download input:checked")
        .map(function () { return this.value })
        .toArray()
    , js = $("#plugins.download input:checked")
        .map(function () { return this.value })
        .toArray()
    , vars = {}
    , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']

私のすべての質問に答えてくれてありがとう、どうもありがとう。

4

1 に答える 1

2

これを参照してください：

//Is this bit of code the convention to add to the start of every jQuery doc?
!function ($) {
$(function(){  //<--------------this is where jQuery starts working 'document ready function'
var $window = $(window)

この：

//What does this do?
$('[href^=#]').click(function (e) {
  e.preventDefault();
});

上記のスクリプト.preventDefault()は、ページがクリックされたとき<a>の属性を持つタグがhref="#"上部にジャンプしないようにしています。これは次と同じですreturn false;

そして以下のコード：

//This code scrolls smoothly to top, however it only works 
//when the code below is present. Why?
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

はい、これは機能します。ここで属性<a>を持つタグを選択しているためhref='#top'です。これをクリックするhtml, bodyと、ドキュメントの位置の一番上にスクロールします0。ただし、これはこのリンクでのみ機能します$("a[href='#top']")

あなたが完全なコードについて言及しなかったように、特定のdivにスクロールしたい場合、これは何の害もありません. $("a[href='#top']").click(function() {またはコードを変更して、$('[href^=#]').click(function (e) {すべてのリンクを機能させることができます。

このスクリプトを試すことができます：

 $('[href^=#]').click(function (e) {
     e.preventDefault();
     var div = $(this).attr('href');
     $("html, body").animate({
         scrollTop: $(div).position().top
       }, "slow");
 });

ここのフィドルでチェックアウト：http://jsfiddle.net/Ja6DN/

于 2013-01-15T07:29:10.510 に答える