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？

回答

相關問題