Téma: Oldal görgetésével forgó lap teteje gomb

Segítséget kérnék. Próbáltam a található mintákat összerakni, nem nagy sikerrel. Rángatódzik, de nem forog. (Ütögettem, nem indul el.)

Ez, ami nem jó:

Kód:

jQuery( document ).ready(function($){
var offset = 666,
    speed = 999,
    duration = 500,
    scrollButton = $('#top'); 
$( window ).scroll( function() {
  if ( $( this ).scrollTop() < offset) {
    scrollButton.fadeOut( duration );
  } else {
    scrollButton.fadeIn( duration );
  }
var theta = $(window).scrollTop() / 10 % Math.PI;
$('#top').css({ transform: 'rotate(' + theta + 'rad)' });
 }); 
    scrollButton.on( 'click', function(e){
    e.preventDefault();
    $( 'html, body' ).animate({
    scrollTop: 0
    }, speed);
 });
});

Nagyon nem értek hozzá, köszönöm a segítséget

HTML kóddal ha kiegészíted, akkor meg tudom nézni élőben egy böngészőben.

Köszönöm.

A görgetéssel forgást codepennél találtam: https://codepen.io/dudleystorey/pen/vHBAE
Ezt szerettem volna összevegyíteni a lap tetejére gombbal, ami áll egy back-to-top.js fájból:

Kód:

jQuery( document ).ready(function($){
  var offset = 661,
      speed = 997,
      duration = 503,
      scrollButton = $('#top');
  $( window ).scroll( function() {
    if ( $( this ).scrollTop() < offset) {
      scrollButton.fadeOut( duration );
    } else {
      scrollButton.fadeIn( duration );
    }
  }); 
  scrollButton.on( 'click', function(e){
    e.preventDefault();
    $( 'html, body' ).animate({
      scrollTop: 0
    }, speed);
  });
});

functions.php-ban:

Kód:

function themeslug_add_button_script() {
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );

function themeslug_add_scroll_button() {
  echo '<a href="#" id="top"><img src="/img/top.png" title="&nbsp;FEL&nbsp;"></a>';
}
add_action( 'wp_footer', 'themeslug_add_scroll_button' );

css:

Kód:

#top {
	position: fixed;
	display: none;
	right: 0;
	bottom: 40px;
	z-index: 997;
}

Próbálgattam, azt arra is gondoltam, hogy talán a sablonban lévő egyéb scriptekkel zavarodik, de szerintem inkább csak nem értek hozzá. Pedig remekül nézne ki, ha forogna a „Fel” gomb.

Összevariáltam. Működőképesen:

back-to-top.js

Kód:

jQuery( document ).ready(function($){
  var offset = 444,
      speed = 999,
      duration = 500,
      scrollButton = $('#up');
	  $(window).scroll(function() {
  var theta = $(window).scrollTop() / 99 % Math.PI;
   $('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
  });
  $( window ).scroll( function() {
    if ( $( this ).scrollTop() < offset) {
      scrollButton.fadeOut( duration );
    } else {
      scrollButton.fadeIn( duration );
    }
  }); 
  scrollButton.on( 'click', function(e){
    e.preventDefault();
    $( 'html, body' ).animate({
      scrollTop: 0
    }, speed);
  });
});

functions.php

Kód:

function themeslug_add_button_script() {
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );

function themeslug_add_scroll_button() {
  echo '<a href="#" id="up"><img src="/img/top.png" id="rightgear"></a>';
}
add_action( 'wp_footer', 'themeslug_add_scroll_button' );

.css

Kód:

#up {
	position: fixed;
	right: 5px;
	bottom: 40px;
	display:none;
	z-index:999;
}

demo: segits.be