HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 文档下载 查看内容

带qq在线客服和二维码的jquery返回顶部特效

2016-11-14 10:44| 发布者: html5cn| 查看: 937| 评论: 0|来自: jQuery之家

摘要: 这是一款带qq在线客服和二维码的jquery返回顶部特效。该特效将qq在线客服代码和微信二维码放置在屏幕右侧的固定位置上,在屏幕向下滚动时会出现返回顶部按钮,非常实用。 ...

简要教程

这是一款带qq在线客服和二维码的jquery返回顶部特效。该特效将qq在线客服代码和微信二维码放置在屏幕右侧的固定位置上,在屏幕向下滚动时会出现返回顶部按钮,非常实用。


使用方法

在页面中引入jquery文件和需要的样式文件style.css

<link href="css/style.css" rel="stylesheet" type="text/css">               

<script src="js/jquery.min.js" type="text/javascript"></script>                 


HTML结构

qq在线客服和微信二维码jquery返回顶部特效的基本HTML结构如下:

<!--qq聊天代码部分begin-->

<div class="izl-rmenu">

    <a class="consult" target="_blank"><div class="phone" style="display:none;">010-1234567</div></a>   

    <a class="cart"><div class="pic"></div></a>  

    <a href="javascript:void(0)" class="btn_top" style="display: block;"></a>

</div>

<a target="_blank"  href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"

     id="udesk-feedback-tab" class="udesk-feedback-tab-left"

     style="display: block; background-color: black;"></a>

<!--qq聊天代码部分end-->


初始化插件

在页面DOM元素加载完毕之后,使用下面的jquery代码来实现返回顶部特效。

$(function() {

    $(".btn_top").hide();

$(".btn_top").on("click",function(){

    $('html, body').animate({scrollTop: 0},300);return false;

})

  $(window).bind('scroll resize',function(){

    if($(window).scrollTop()<=300){

      $(".btn_top").hide();

    }else{

      $(".btn_top").show();

    }

  })

})

 

原文链接:http://www.htmleaf.com/jQuery/Layout-Interface/201611104184.html

原作者:jQuery之家


本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ2601929995,我们会在第一时间进行处理!

 

投稿: 2601929995@qq.com


鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-3-29 02:17

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部