jQuery topLink Plugin — Перейти вверх

Скрипт «в вверх» скрипт позволяет перейти в начало страницы при просмотре.

1. html

Top of Page

2. CSS

#top-link  { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }

3. jQuery JavaScript

//plugin
jQuery.fn.topLink = function(settings) {
  settings = jQuery.extend({
    min: 1,
    fadeSpeed: 200
  }, settings);
  return this.each(function() {
    //listen for scroll
    var el = $(this);
    el.hide(); //in case the user forgot
    $(window).scroll(function() {
      if($(window).scrollTop() >= settings.min)
      {
        el.fadeIn(settings.fadeSpeed);
      }
      else
      {
        el.fadeOut(settings.fadeSpeed);
      }
    });
  });
};

//usage w/ smoothscroll
$(document).ready(function() {
  //set the link
  $('#top-link').topLink({
    min: 400,
    fadeSpeed: 500
  });
  //smoothscroll
  $('#top-link').click(function(e) {
    e.preventDefault();
    $.scrollTo(0,300);
  });
});

Подробнее
для работы требуется скачать 2 скрипта
1. davidwalsh.name/dw-content/jquery-1.3.2.js
2. davidwalsh.name/dw-content/jquery.scrollTo-1.4.0-min.js



	
	

Демо тут davidwalsh.name/dw-content/top-of-page-jquery.php

davidwalsh.name/jquery-top-link

jQuery topLink Plugin — Перейти вверх

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *