トップボタンのWebページ設定について
22650 ワード
方法1:
直接htmlで実現し、バッファリングの効果がなく、直接上部に彪.
方法2:方法1の基礎の上でバッファ効果を加えて、つまりjsを追加して実現します
jsコードは以下の通りです.
demoテストアドレス
方法3:「TOP」のデフォルトは非表示で、バーをスクロールして一定の高さにスクロールすると表示され、そうでない場合は非表示になります.これで、真ん中のどこかからページの上部に戻りたいかもしれません.
The HTML :
Top of Page
The CSS :
#gototop { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; } #gototop { text-decoration:underline; }
The MooTools JavaScript:MooTools CoreライブラリとMooTools MorライブラリのFxが必要です.Scroll.jsとFx.SmoothScroll.jsの2大ファイル.
demoテストアドレス
方法3:もう1つの例は「TOP」を動的に生成することである.
The MooTools JavaScript :
The jQuery JavaScript:jQuery’s ScrollTo pluginプラグインでスムーズなアンカーを追加する必要があります.
demoテストアドレス
以上のコードはie 7に対して使用されず、ie 7コードに対して以下の通りである.
記事転載先:http://www.missyuan.com/viewthread.php?tid=450821
直接htmlで実現し、バッファリングの効果がなく、直接上部に彪.
1 HTMl:
2
3 <a id="return-top" href="#top">
4 <span class="pointer"></span>
5 <p class="black-circle">TOP</p>
6 </a>
7
8
9 CSS:
10
11 #return-top{
12 width:51px;
13 height:51px;
14 position:fixed;
15 right:0;
16 bottom:0;
17 z-index: 100;
18 border-radius: 51px;
19 background: #424243;
20
21 }
22 .pointer{
23 display: inline-block;
24 background: url(../img/icon_backtotop.png) no-repeat top center;
25 width:21px;
26 height:13px;
27 position: relative;
28 top:16px;
29 left:15px;
30 }
31 .black-circle{
32 color:#fff;
33 text-align: center;
34 width:51px;
35 font-size: 12px;
36 height:12px;
37 margin-top:15px;
38 }
39 #return-top:hover .pointer{
40 top:10px;
41 }方法2:方法1の基礎の上でバッファ効果を加えて、つまりjsを追加して実現します
jsコードは以下の通りです.
/**
* ： UED ，http://www.iamued.com/qianduan/816.html
*
* @param acceleration
* @param time ( )
**/
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
//
var x = Math.max(x1, Math.max(x2, x3));
//
var y = Math.max(y1, Math.max(y2, y3));
// = / , , 1 ,
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// ,
if(x > 0 || y > 0) {
var invokeFunction = goTop( +acceleration+ , +time+ );
window.setTimeout(invokeFunction, time);
}
}demoテストアドレス
方法3:「TOP」のデフォルトは非表示で、バーをスクロールして一定の高さにスクロールすると表示され、そうでない場合は非表示になります.これで、真ん中のどこかからページの上部に戻りたいかもしれません.
The HTML :
Top of Page
The CSS :
#gototop { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; } #gototop { text-decoration:underline; }
The MooTools JavaScript:MooTools CoreライブラリとMooTools MorライブラリのFxが必要です.Scroll.jsとFx.SmoothScroll.jsの2大ファイル.
1 window.addEvent('domready',function() {
2 new SmoothScroll({duration:700});
3 /* go to top */
4 var go = $('gototop');
5 go.set('opacity','0').setStyle('display','block');
6 window.addEvent('scroll',function(e) {
7 if(Browser.Engine.trident4) {
8 go.setStyles({
9 'position': 'absolute',
10 'bottom': window.getPosition().y + 10,
11 'width': 100
12 });
13 }
14 go.fade((window.getScroll().y > 300) ? 'in' : 'out')
15 });
16 });demoテストアドレス
方法3:もう1つの例は「TOP」を動的に生成することである.
The MooTools JavaScript :
1 /**
2 * back-to-top: unobtrusive global 'back to top' link using mootools 1.2.x
3 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
4 * http://creativecommons.org/licenses/by-sa/3.0/
5 */
6
7 // hide the effect from IE6, better not having it at all than being choppy.
8 if (!Browser.Engine.trident4) {
9 // element added onload for IE to avoid the operation aborted bug. not yet verified for IE8 as it's still on beta as of this modification.
10 window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){
11 var target_opacity = 0.64;
12 new Element('span', {
13 'id': 'back-to-top',
14 'styles': {
15 opacity: target_opacity,
16 display: 'none',
17 position: 'fixed',
18 bottom: 0,
19 right: 0,
20 cursor: 'pointer'
21 },
22 'text': 'back to top',
23 'tween': {
24 duration: 200,
25 onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')}
26 },
27 'events': {'click': function() {
28 /*location javascript ， location.href url， location.href=url url。 location.hash 。 http://ued.alimama.com#admin location.hash=#admin, 。*/
29 if (window.location.hash) { window.location.hash = '#top'; }
30 else { window.scrollTo(0, 0);/* 。*/ }
31 }}
32 }).inject(document.body);
33
34 window.addEvent('scroll', function() {
35 var visible = window.getScroll().y > (window.getSize().y * 0.8);
36 if (visible == arguments.callee.prototype.last_state) return;
37
38 // fade if supported
39 if (Fx && Fx.Tween) {
40 if (visible) $('back-to-top').fade('hide').setStyle('display', 'inline').fade(target_opacity);
41 else $('back-to-top').fade('out');
42 } else {
43 $('back-to-top').setStyle('display', (visible ? 'inline' : 'none'));
44 }
45
46 arguments.callee.prototype.last_state = visible
47 });
48 });
49 }The jQuery JavaScript:jQuery’s ScrollTo pluginプラグインでスムーズなアンカーを追加する必要があります.
1 //plugin
2 jQuery.fn.topLink = function(settings) {
3 settings = jQuery.extend({
4 min: 1,
5 fadeSpeed: 200
6 }, settings);
7 return this.each(function() {
8 //listen for scroll
9 var el = $(this);
10 el.hide(); //in case the user forgot
11 $(window).scroll(function() {
12 if($(window).scrollTop() >= settings.min)
13 {
14 el.fadeIn(settings.fadeSpeed);
15 }
16 else
17 {
18 el.fadeOut(settings.fadeSpeed);
19 }
20 });
21 });
22 };
23
24 //usage w/ smoothscroll
25 $(document).ready(function() {
26 //set the link
27 $('#gototop').topLink({
28 min: 400,
29 fadeSpeed: 500
30 });
31 //smoothscroll
32 $('#gototop').click(function(e) {
33 e.preventDefault();
34 $.scrollTo(0,300);
35 });
36 });demoテストアドレス
以上のコードはie 7に対して使用されず、ie 7コードに対して以下の通りである.
1 //plugin
2 jQuery.fn.topLink = function(settings) {
3 settings = jQuery.extend({
4 min: 1, fadeSpeed: 200,
5 ieOffset: 50
6 }, settings);
7 return this.each(function() {
8 //listen for scroll
9 var el = $(this);
10 el.css('display','none'); //in case the user forgot
11 $(window).scroll(function() {
12 //stupid IE hack
13 if(!jQuery.support.hrefNormalized) {
14 el.css({
15 'position': 'absolute',
16 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
17 });
18 }
19 if($(window).scrollTop() >= settings.min)
20 {
21 el.fadeIn(settings.fadeSpeed);
22 }
23 else
24 {
25 el.fadeOut(settings.fadeSpeed);
26 }
27 });
28 });
29 };
30
31
32 $(document).ready(function() {
33 $('#gototop').topLink({
34 min: 400,
35 fadeSpeed: 500
36 });
37 //smoothscroll
38 $('#gototop').click(function(e) {
39 e.preventDefault();
40 $.scrollTo(0,300);
41 });
42 });記事転載先:http://www.missyuan.com/viewthread.php?tid=450821