scrollTop не работает хорошо внутри iframe

Question

У меня есть html-файл, созданный с помощью cloudconvert.com, который я завернул с помощью java-скрипта, чтобы выделить текст внутри него и прокрутить до первого выделения, используя функцию прокрутки JQuery(). Смотрите пример:

function doSearch2(text,color) { 
    if (window.find && window.getSelection) { 
     document.designMode = "on"; 
     var sel = window.getSelection(); 

     sel.collapse(document.body, 0); 

     while (window.find(text)) { 
      document.execCommand("HiliteColor", false, color); 
      sel.collapseToEnd(); 
     } 
     document.designMode = "off"; 
    } else if (document.body.createTextRange) { 
     var textRange = document.body.createTextRange(); 
     while (textRange.findText(text)) { 
      textRange.execCommand("BackColor", false, color); 
      textRange.collapse(false); 
     } 
    } 

     var sel2 = document.getSelection(); 
     var seltop = $(sel2.anchorNode.parentElement).offset().top; 
     var doccurrenttop = $('#page-container').scrollTop(); 
     var scrollto = doccurrenttop + seltop - 70; // spce of 70px 
     if (scrollto < 0) { scrollto = 0; } 
     $('#page-container').scrollTop(scrollto); 
} 

doSearch2("Cross","yellow"); 

http://jsfiddle.net/3c3vx862/

Я пытаюсь вставить функцию doSearch2() в главе HTML файл и загрузить его на IFRAME внутри нового HTML документа. Затем я вызываю doSearch2() из кнопки внешнего документа.

ScrollTop отлично работает, за исключением некоторых случаев (например, прокрутки в нижней части документа и других случайных местоположений). Когда я его отлаживаю, я нахожу, что sel2 (= document.getSelection()) равно нулю.

Любые идеи?

Спасибо!

Answer 1

Ну, это не работает, вероятно, для всех созданных скриптов и html, которые у вас есть, но вы можете взглянуть на этот jsfiddle, который я сделал для вас здесь.

Добавьте это в HTML-страницу:

<a href="#0" class="cd-top">Top</a> 

Script

jQuery(document).ready(function($){ 
// browser window scroll (in pixels) after which the "back to top" link is shown 
var offset = 300, 
    //browser window scroll (in pixels) after which the "back to top" link opacity is reduced 
    offset_opacity = 1200, 
    //duration of the top scrolling animation (in ms) 
    scroll_top_duration = 700, 
    //grab the "back to top" link 
    $back_to_top = $('.cd-top'); 

//hide or show the "back to top" link 
$(window).scroll(function(){ 
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out'); 
    if($(this).scrollTop() > offset_opacity) { 
     $back_to_top.addClass('cd-fade-out'); 
    } 
}); 

//smooth scroll to top 
$back_to_top.on('click', function(event){ 
    event.preventDefault(); 
    $('body,html').animate({ 
     scrollTop: 0 , 
     }, scroll_top_duration 
    ); 
}); 

}); 

CSS

.cd-top { 
display: inline-block; 
height: 40px; 
width: 40px; 
position: fixed; 
bottom: 100px; 
right: 10px; 
z-index: 10; 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
/* image replacement properties */ 
overflow: hidden; 
text-indent: 100%; 
white-space: nowrap; 
background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%; 
visibility: hidden; 
opacity: 0; 
-webkit-transition: opacity .3s 0s, visibility 0s .3s; 
-moz-transition: opacity .3s 0s, visibility 0s .3s; 
transition: opacity .3s 0s, visibility 0s .3s; 
} 
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { 
-webkit-transition: opacity .3s 0s, visibility 0s 0s; 
-moz-transition: opacity .3s 0s, visibility 0s 0s; 
transition: opacity .3s 0s, visibility 0s 0s; 
} 
.cd-top.cd-is-visible { 
/* the button becomes visible */ 
visibility: visible; 
opacity: 1; 
} 
.cd-top.cd-fade-out { 
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */ 
opacity: .5; 
} 
.no-touch .cd-top:hover { 
background-color: #e86256; 
opacity: 1; 
} 
@media only screen and (min-width: 768px) { 
.cd-top { 
right: 20px; 
bottom: 20px; 
    } 
} 
@media only screen and (min-width: 1024px) { 
.cd-top { 
height: 60px; 
width: 60px; 
right: 30px; 
bottom: 30px; 
} 
} 

jsFiddle here