Home

JS special effects

jQuery right sidebar QR code QQ customer service return to top code

Download Now Preview

Based on jquery.1.11.1.min.js, the concise jQuery right column customer service code has WeChat QR code, QQ, phone display and return to the top functions. There is a floating layer on the right side of the web page, and the effect is effective when the mouse is moved up.

js code

        <script type="text/javascript">
            $(function() {
                $("#service a").hover(function() {
                    if ($(this).prop("className") == "weixin_area") {
                        $(this).children("img.hides").show();
                    } else {
                        $(this).children("div.hides").show();
                        $(this).children("img.shows").hide();
                        $(this).children("div.hides").animate({marginRight: '0px'}, '0');
                    }
                }, function() {
                    if ($(this).prop("className") == "weixin_area") {
                        $(this).children("img.hides").hide();
                    } else {
                        $(this).children("div.hides").animate({marginRight: '-163px'}, 0, function() {
                            $(this).hide();
                            $(this).next("img.shows").show();
                        });
                    }
                });

                $("#top_btn").click(function() {
                    $("html,body").animate({scrollTop: 0}, 600);
                });

                //右侧导航 - 二维码
                $(".weixin_area").hover(function() {
                    $(this).children(".weixin").show();
                },function(){
                    $(this).children(".weixin").hide();
                })
            });
        </script>

Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

jQuery implements dark QQ customer service effect code displayed on the right side that can be displayed by sliding to the left

16 May 2016

This article mainly introduces the jQuery implementation of the dark QQ customer service effect code that can be displayed on the right side and can be swiped to the left. It involves the implementation skills of jQuery controlling the dynamic transformation of page element styles. It has certain reference value. Friends in need can refer to it.

js+css to implement back to top button_javascript skills

16 May 2016

This article mainly introduces the back to top button back to top using js+css in detail. Interested friends can refer to it.

08 Oct 2016

The back to top function in the website is beneficial to enhance the user experience. When a page is very long, going back to the top is essential. Back to the top button, you can use pictures, background images, vector font icons, or use code css to generate. The css generated method is used here.

HTML Study Notes 2 (Back to Top and Back to Bottom)_html/css_WEB-ITnose

24 Jun 2016

HTML Learning Notes 2 (Back to Top and Back to Bottom)

08 Oct 2016

WeChat applet implements the button effect of [Back to top]

12 May 2018

When we browse products or articles, when one screen is not enough, we will keep dragging up to see more content. When we need to go back to the top, we manually slide our fingers to control the page to flip up, which is efficient. very low. At this time, we need to use the [Back to Top] button to help us quickly return to the top. Without further ado, let’s implement this function.

css to achieve quick return to the top effect

20 May 2020

This article introduces you to the CSS method to quickly return to the top effect. It has certain reference value and I hope it can help everyone. You can go back to the top through an anchor link. You need to add a tag named top to the body.

js hide and show back to top button and window.onscroll event application_javascript skills

16 May 2016

Now most websites will add this function: when the scroll bar scrolls to the bottom of the page, a "Back to Top" button or link will be displayed in the lower right corner of the page; then, how to control the display of the "Back to Top" button Or hide it? This article introduces the detailed implementation method. If you are interested, don’t go away.

See all articles