Recently, I have been designing and writing my first small project, which needs to use the function of a floating window in the development. It is written in javascript. Here is the finished product I have written:

This floating window is in the lower right corner as other functions, respectively: back to the top, GitHub entrance, digging gold entrance three functions, so I wrote it in.js as the interface loading completed to generate this style.

Code implementation

window.onload = function () {
    let medusa = document.createElement('div');
    medusa.setAttribute('class'.'medusa');
    let base_url = CheckImgExists('static/Github.png')?'static/' : '.. /static/';
    medusa.innerHTML = ' ' +
        '<div><a onclick="goTop()" title="Top"><img class="pass" src="' + base_url + 'Top.png"></a></div>' +
        '<div><a href="https://www.github.com/MedusaSorcerer/" title="Github" target="_blank"><img class="pass" src="' + base_url + 'Github.png"></a></div>' +
        '< div > < a href = "https://juejin.cn/user/2805609406139950" title = "nuggets" target = "_blank" > < img class = "pass" SRC = "' + base_url + 'Juejin.png"></a></div>';
    document.body.appendChild(medusa);
}

function CheckImgExists(url) {
    let ImgObj = new Image();
    ImgObj.src = url;
    return ImgObj.width > 0;
}

function goTop() {
    let scrollToTop = setInterval(function () {
        let pos = window.pageYOffset;
        if (pos > 0) {
            window.scrollTo(0, pos - 20);
        } else {
            window.clearInterval(scrollToTop); }},10);
}
Copy the code

The first part is to insert the HTML code after the interface is loaded. Of course, you need to replace the image path and the A tag HREF path as your own value. The second part is to determine if the image path exists because of the parsing problem I encountered when using the image path. Otherwise use.. / is appended to the parent directory, and the third part uses the back to the top button to ease the back to the top code, instead of going straight back to the top, making an animation effect.

Here are the CSS style blocks you need to use.

.medusa {
    position: fixed;
    right: 1%;
    bottom: 5%;
    width: 50px;
    border: 1px solid #cdcccc;
    background-color: white;
    font-size: 20px;
    z-index: 1040;
    -webkit-backface-visibility: hidden;
}

.medusa > div > a > img {
    width: 30px;
    height: 30px;
}

.medusa > div {
    margin: 5px 0 5px 9px;
}

.medusa > div > a {
    padding: 0 0 7px 0;
}

.medusa > div > a:hover {
    border-top: 2px solid #00a8e8;
    border-bottom: 2px solid #e80000;
}
Copy the code

Image resources












Long time no update, refueling ~