Use JQUERY to achieve variable transparency return to top effect

一个新手
Release: 2017-09-08 14:17:13
Original
1682 people have browsed it

1. Add the A tag to the page (HTML) (return to the top hyperlink)

<a href="#0" class="cd-top">Top</a>
Copy after login

2. Add css style (can be written in the page, or Written in a separate css style sheet)

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  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(../images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */
  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;
  }
}
Copy after login

3. Add js code (before adding js, you must first reference the jquery library, otherwise it will be invalid)

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Copy after login
$(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 = $(&#39;.cd-top&#39;);

	//hide or show the "back to top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass(&#39;cd-is-visible&#39;) : $back_to_top.removeClass(&#39;cd-is-visible cd-fade-out&#39;);
		if( $(this).scrollTop() > offset_opacity ) { 
			$back_to_top.addClass(&#39;cd-fade-out&#39;);
		}
	});
	//www.sucaijiayuan.com
	//smooth scroll to top
	$back_to_top.on(&#39;click&#39;, function(event){
		event.preventDefault();
		$(&#39;body,html&#39;).animate({
			scrollTop: 0 ,
		 	}, scroll_top_duration
		);
	});

});
Copy after login

The above is the detailed content of Use JQUERY to achieve variable transparency return to top effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template