jQuery Popover/Tooltip中的链接不适用于jQuery SmoothScroll？

我想交叉引用页面内的很多信息，发现popovers提供了一个清除链接的好方法。然而，平滑的滚动工作正常的链接，但当然不适用于弹出内的链接（我猜是因为它们不存在“准备文档”）。下面是一个MWE（有很多Lorem存有填满页），以显示我的意思：jQuery Popover/Tooltip中的链接不适用于jQuery SmoothScroll？

<!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>

来源

2016-12-09 Nickolai

对不起，如果它是建立在这些论坛眉头一皱，当人们回答自己的问题，但是，虽然我找不到任何人有同样的问题，我真的在这个问题上挣扎了几天，但我偶然发现了一些不相关的东西，从这里得到了灵感：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（），然后将它放在两个地方将有任何优势。请让我知道你在想什么。

来源

2016-12-09 20:47:12 Nickolai

jQuery Popover/Tooltip中的链接不适用于jQuery SmoothScroll？

回答

相关问题