scrollTop does not work well inside iframe

Question

I have a html file created with cloudconvert.com that I wrapped with java script to highlight text inside it and scroll to first highlight using JQuery scrollTop() function. See example:

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/

I try to insert doSearch2() function into the head of the html file and load it on iframe inside new html document. Then I call doSearch2() from button on the outer document.

The scrollTop works fine, except on some cases (like scrolling to the bottom of the document and other random locations). When I debug it I find that sel2 (= document.getSelection()) is zero.

Any Ideas ?

Thanks !

Answer 1

Well it doesnt work probably for all that generated script and html you have there but you can take a look at this jsfiddle I made for you here.

Add this to your html page:

<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