我刚给我的页脚添加了一个向上箭头＆amp;在我的导航标签工作之前将其链接到#top标签，排序。
1向上箭头上的过渡与它不同，当我将鼠标移到它上面时它不仅仅会发生过渡，如果我的鼠标与它水平对齐，它也会播放过渡。
2我无法弄清楚如何让scrollTop显示我的导航，因为它只是滚动到固定标题的底部。
这是我正在使用的代码：
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-300
}, 1000);
return false;
}
});
});
</script>
CSS
.stage {
position:relative;
height: 8em;
}
.arrow {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 2em;
width: 100px; /* width of arrow */
-webkit-transition: .4s top;
-moz-transition: .4s top;
-o-transition: .4s top;
transition: .4s top;
}
.stage:hover .arrow {
left: 0;
top: 0;
}
#outer {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
}
PHP
<div id="wrapper"><!-- #### WRAPPER #### -->
<!DOCTYPE html>
<html <?php language_attributes(); ?>><!-- #### HTML #### -->
<head><!-- #### HEAD #### -->
<title><?php bloginfo('name'); ?></title><!-- #### TITLE #### -->
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
<?php wp_head(); ?>
<!-- #### SCRIPT #### -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-300
}, 1000);
return false;
}
});
});
</script>
<!-- #### / SCRIPT #### -->
</head><!-- #### / HEAD #### -->
<body <?php body_class(); ?>><!-- #### BODY #### -->
<header class="align_Center"><!-- #### HEADER #### -->
<img src="<?php echo get_template_directory_uri(); ?>/img/logo/icon.Black.png" width="128px" height="128" style="padding: 20px">
<br>
<div class="align_Center" style="font-size:2em; color: #000;"><?php bloginfo('name'); ?></div>
<br>
<div class="align_Center" style="font-size:1.2em; color: #000;"><?php bloginfo('description'); ?></div>
</header><!-- #### / HEADER #### -->
<div class="_top" id="top"></div>
<div id="nav"><!-- #### NAV #### -->
<table class="main-nav" align="center">
<tr>
<td>
<?php
$args = array(
'theme_location' => 'primary',
'walker' => new Walker_Menu
);
wp_nav_menu( $args );
?>
</td>
</tr>
</table>
</div><!-- #### / NAV #### -->
<div class="content"><!-- #### CONTENT #### -->
<div class="container"><!-- #### CONTAINER #### -->
<br>
<div class="col-md-3" id="sidebarRandom"><!-- #### COLUMN #### -->
<p class="f_header">Random Movies</p>
<?php
$args = array(
'post_status' => 'publish',
'post_type' => 'movies',
'posts_per_page' => 25,
'orderby' => 'rand'
);
$query = new WP_Query( $args );
if ($query->have_posts()) {
?>
<table width="100%"><!-- #### TABLE #### -->
<?php
while ($query->have_posts()) {
$query->the_post();
?>
<tr>
<td class="movie_genre">
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</td>
</tr>
<?php
}
?>
</table><!-- #### / TABLE #### -->
<?php }; wp_reset_postdata(); ?>
</div><!-- #### / COLUMN #### -->
<div class="col-md-6"><!-- #### COLUMN #### -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="panel panel-blue panel-body">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile;
else : echo '<p>NO CONTENT FOUND</p>';
endif;
?>
<div style="border-bottom:1em"></div>
</div><!-- #### / COLUMN #### -->
<div class="col-md-3" id="sidebarYear"><!-- #### COLUMN #### -->
<p class="f_header">Movies <?php echo date( 'Y' ); ?></p>
<?php
$args = array(
'post_status' => 'publish',
'post_type' => 'movies',
'orderby' => 'meta_value',
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'released',
'value' => array( date( 'Y' ), date( 'Y' ) + 1 ),
'compare' => 'BETWEEN'
),
),
);
$query = new WP_Query( $args );
if ($query->have_posts()) {
?>
<table width="100%">
<?php
while ($query->have_posts()) {
$query->the_post();
?>
<tr>
<td class="movie_genre">
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</td>
</tr>
<?php
}
?>
</table>
<?php }; wp_reset_postdata(); ?>
</div><!-- #### / COLUMN #### -->
</div><!-- / CONTAINER -->
<br>
</div><!-- #### / CONTENT #### -->
<div id="footer"><!-- #### FOOTER #### -->
<div class="outer">
<div class="stage">
<a href="#top">
<img class="arrow" alt="" src="<?php echo get_template_directory_uri(); ?>/img/arrows/button_up_hover.png">
</a>
</div></div>
<div class="align_Center" style="font-size:2em; color: #000;"><?php bloginfo('name'); ?></div>
<div class="align_Center" style="font-size:1.2em; color: #000; padding-bottom: 20px;">© <?php bloginfo('name'); ?> <?php echo date('Y'); ?></div>
</div><!-- #### / FOOTER #### -->
<?php wp_footer(); ?>
</body><!-- #### BODY #### -->
</html><!-- #### HTML #### -->