Question

我最初遇到了以下JS平滑滚动的问题，因为它创建了任何真正的链接而不是#location停止工作。

    $('.navbar-nav > li').click(function(event) {
    event.preventDefault();
    var target = $(this).find('>a').prop('hash');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 500);
});

所以我把它改成了

    $(document).ready(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target
      || $('[name=' + this.hash.slice(1) +']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body')
        .animate({scrollTop: targetOffset}, 1200);
       return false;
      }
    }
  });
});

这解决了无法添加工作的原始问题＆＃34;博客＆＃34;导航栏中的链接，但现在它已经呈现左右（下一个和上一个）轮播按钮不起作用。

如果有人可以帮我解决这个问题，我会很感激，因为这会让我发疯。

轮播的html如下

    <section id="main-slider" class="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="container">
                <div class="carousel-content">
                    <h1>Responsive Website Design</h1>
                    <p class="lead">With 20% of all website traffic in the UK coming from tablets and smart phones then never before has it been a better time to have a responsive website.</p>
                </div>
            </div>
        </div><!--/.item-->
        <div class="item">
            <div class="container">
                <div class="carousel-content">
                    <h1>Free Consultation</h1>
                    <p class="lead">I understand every business has different needs so we can discuss what it is your want to achieve and using my expert advice make it a reality.</p>
                </div>
            </div>
        </div><!--/.item-->
        <div class="item">
            <div class="container">
                <div class="carousel-content">
                    <h1>Built to be SEO/Google Friendly</h1>
                    <p class="lead">Having a website built is the first step but next you need to put it in front of your target audience. On site SEO is where it all begins.</p>
                </div>
            </div>
        </div><!--/.item-->
    </div><!--/.carousel-inner-->
    <a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
    <a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
</section><!--/#main-slider-->

Answer 1

首先，上述答案是正确的。对于需要帮助的人，我只想更清楚地说明一点。

需要更新的代码是SmoothScroll函数本身。您需要从引导页面知道轮播的ID。只需将轮播ID添加到not().click功能，它就像魅力一样。这是我所做的一个例子。更改是在第三行代码中进行的，您可以在其中看到轮播ID#。

<script>
$(function() {
  $('a[href*=#]:not([href=#carousel-299058])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 70
        }, 500);
        return false;
      }
    }
  });
});
</script>

Answer 2

尝试替换它：

$('a[href*=#]:not([href=#])').click(function() {

使用：

$('a[href*=#]:not([href=#media])').click(function () {

快乐的编码！

Answer 3

我使用的是每个人都使用的平滑滚动javascript并遇到同样的问题，就像我使用#myCarousel的所有听话的小开发者一样：

<a class="right carousel-control" href="#myCarousel" data-slide="next">

当我将[href=media]更改为[href=myCarousel]后，我的Bootstrap轮播控件再次开始工作。

Answer 4

我最近遇到了这个问题，我的解决方案是在每个链接上使用一个类，而不是jQuery函数中的href属性选择器。

这确实意味着一些额外的HTML标记，但我觉得它更强大，并且可以减少对项目中可能添加的其他脚本的干扰。

所以：

$('a[href*=#]:not([href=#])').click(function() {

成为这样：

$('.your-class-name').click(function() {

您添加到网页的所有平滑滚动链接都将变为：

<a href="#section" class="your-class-name">Link</a>

并滚动至：

<div id="section">... Content ...</div>

Answer 5

别忘了添加：\\。自最新版本的JQUERY以来，有必要添加它。

$('a[href*=\\#]:not([href=\\#carousel-299058])').click(function() {

平滑滚动在Bootstrap 3中使用Prev和Next在Carousel上进行干扰

5 个答案: