jquery实现带滚动进度的返回顶部按钮效果代码
代码语言:html
所属分类:加载滚动
代码描述:jquery实现带滚动进度的返回顶部按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/unicons.css"> <style> /* Please ❤ this if you like it! */ @import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese'); @import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext'); :root { font-size: 20px; --red: #da2c4d; --yellow: #f8ab37; --green: #2ecc71; --white: #ffffff; --grey-light: #f2f7f9; --grey: #ecedf3; --black: #080808; --black-blue: #1f2029; --black-blue-light: #353746; --black-blue-light-2: #404255; --black-blue-light-3: #4b4d64; --black-light: #424455; } body{ font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--grey); background-color: var(--black-blue); overflow-x: hidden; letter-spacing: 0.2px; -webkit-transition: all 200ms linear; transition: all 200ms linear; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } body.light{ color: var(--black-light); } h1{ font-family: 'Muli', sans-serif; font-size: 12vw; font-weight: 900; line-height: 1; color: var(--white); -webkit-transition: all 200ms linear; transition: all 200ms linear; } body.light h1{ color: var(--black); } body.light{ background-color: var(--white); } .navbar-brand{ height: 36px; position: fixed; top: 50px; left: 70px; z-index: 3333; width: auto; display: inline-block; margin: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0