Ссылки в jQuery Popover/Tooltip не работают с jQuery SmoothScroll?

Я пытаюсь перекрестно ссылаться на большую часть информации на странице и обнаружил, что popovers обеспечивают хороший способ де-загромождения ссылок. Тем не менее, гладкая прокрутка работает на обычных ссылках, но, конечно, не работает на ссылках внутри popovers (я думаю, потому что они не существуют «на готовом документе»). Вот MWE (есть много Lorem Ipsum для заполнения страницы), чтобы показать, что я имею в виду:Ссылки в 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() {});

запускает функцию(), когда открывается popover, а затем внутри которой нам нужна другая функция, которая будет выполнять плавную прокрутку при нажатии на любые ссылки, которые находятся на странице, содержащей popover. Таким образом, это выглядит так:

$('[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?

ответ

Смежные вопросы