Question

我试图在页面中交叉引用很多信息，发现popovers提供了一种很好的解除链接混乱的方法。但是，平滑滚动适用于普通链接，但当然不适用于弹出窗口内的链接（我猜因为它们不存在“文档就绪”）。这是一个MWE（有很多Lorem ipsum来填充页面）来显示我的意思：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
$(document).ready(function(){
   // initialise popover
    $('[data-toggle="popover"]').popover({
        html:true,
        delay:{hide:2000},
    });

  //Smooth Scroll on anchor links
$('a[href*=\\#]:not([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) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});
});

</script>
</head>
<body>

<a href="#one">Section One</a>
<br />
<a href="#two">Section Two</a>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" data-content='<a href="#one">Section One</a>'>S1</a><br>
  <a href="#" data-toggle="popover" data-trigger="hover" data-content='<a href="#two">Section two with explanations and stuff</a>'>S2</a>
</div>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

<section id="one">Section One</section>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

<section id="two">Section 2</section>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</body>
</html>

Answer 1

对不起，当人们回答他们自己的问题时，如果在这些论坛上不满意，但是，虽然我找不到有同样问题的人，但我真的在为这个问题挣扎了一些几天，我偶然发现了一些无关的东西，从这里得到了灵感：Get the elements of HTML tags inside data-content of popover

所以，基本上，据我所知，这样：

 $('[data-toggle="popover"]').on('inserted.bs.popover', function () {});

在弹出窗口打开时启动函数（），然后在其中我们需要另一个函数，在点击包含弹出窗口的页面上的任何链接时执行平滑滚动。所以，它看起来像这样：

    $('[data-toggle="popover"]').on('inserted.bs.popover', function () {
        $('a[href*=\\#]:not([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) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                return false;
                }
            }
        });
    });

似乎适合我。它看起来很难看，但不知道创建一个自定义函数SmoothScroll（）然后将它放在两个地方都会有任何好处。请让我知道你的想法。

jQuery Popover / Tooltip中的链接不能与jQuery SmoothScroll一起使用？

1 个答案: