jQuery scrollTo插件

时间:2013-01-15 06:53:45

标签: jquery anchor scrollto smooth-scrolling

我正在使用Ariel Flesler的scrollTo插件和bootstrap。它看起来很简单,但我不能让它工作。我想单击按钮,它将平滑滚动到相应的ID。这是一个按钮的示例。

这是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 bootstrap的网站&#34; application.js&#34;不理解他们的意思,但只是黑客共同使我的网站工作。你能解释一下这些代码的含义吗?

//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']

感谢您回答我的所有问题,非常感谢。

1 个答案:

答案 0 :(得分: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>的{​​{1}}标记不会跳到顶部,这与{{1}相同}

以及以下代码:

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

由于你没有提到完整的代码,但如果你想滚动到特定的div,这不会有任何伤害。您可以修改0$("a[href='#top']")代码以使所有链接正常工作。

你可以试试这个剧本:

$("a[href='#top']").click(function() {

在这里结账:http://jsfiddle.net/Ja6DN/