ScrollTo:平滑滚动到页面指定位置

原创文章 作者:月光光 2011年03月14日 12:13helloweba.com 标签:jQuery 

ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多,页面长度有好几屏的场合,本文以DEMO为示例讲解该插件的应用。

使用方法

1、准备jQuery库和scrollTo.js插件。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

2、HTML

<ul class="nav">
   <li><a href="#" class="nav_pro">产品展示</a></li>
   <li><a href="#" class="nav_news">新闻中心</a></li>
   <li><a href="#" class="nav_ser">服务支持</a></li>
   <li><a href="#" class="nav_con">联系我们</a></li>
   <li><a href="#" class="nav_job">人才招聘</a></li>
</ul>
<div id="pro" class="box">
   <h3>产品展示</h3>
</div>
<div id="news" class="box">
   <h3>新闻中心</h3>
</div>
<div id="ser" class="box">
   <h3>服务支持</h3>
</div>
<div id="con" class="box">
   <h3>联系我们</h3>
</div>
<div id="job" class="box">
   <h3>人才招聘</h3>
</div>

我们用一个页面展示导航和导航对应的每个模块。

3、CSS

.nav{width:500px;margin:20px auto;}
.nav li{float:left; width:100px; height:24px; line-height:24px}
.box{height:500px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
#pro,#ser{background:url(img/bg.jpg)}
#news,#con{background:url(img/bg2.gif)}

4、使用scrollTo.js插件

$(function(){
	$(".nav_pro").click(function(){
		$.scrollTo('#pro',500);
	});
	$(".nav_news").click(function(){
		$.scrollTo('#news',800);
	});
	$(".nav_ser").click(function(){
		$.scrollTo('#ser',1000);
	});
	$(".nav_con").click(function(){
		$.scrollTo('#con',1200);
	});
	$(".nav_job").click(function(){
		$.scrollTo('#job',1500);
	});
});

当点击导航按钮时,触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,传冲效果等,具体可以参照官方网站的例子:http://demos.flesler.com/jquery/scrollTo/

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/118.html

15条评论

  • http://weibo.zhaock***

  • 这边有台安卓上UC,scrollTop好像获取不到好捉急啊

  • 咦,胡总我看到你啦

  • $('html,body').animate({scrollTop: height}, 500); 一句话解决还要额外插件干嘛

  • 终于找到了!!!我的***是1270449000,如果您愿意告知我答案!!
    你好,我最近遇到类似的问题,我在wordpress下了个主题,它可以通过导航菜单跳到指定位置,可以我自己用时发现不行,你能帮我看看哪里出问题了吗?我不太懂代码,不太会,这是我的网址www.miminiuniu.com

    function.php代码你能看看哪里出问题了吗
    <?php
    /*--Basic Config calling---*/


    //Theme Options
    require_once (dirname( __FILE__ ) . "/admin/theme-options.php" );
    //Common functions
    require_once (dirname( __FILE__ ) . "/admin/common-functions.php" );

    //Metaboxes
    require_once (dirname( __FILE__ ) . "/admin/custom-metabox.php" );
    //Custom Post types
    require_once (dirname( __FILE__ ) . "/admin/custom-post-types.php" );
    //Theme Styles
    require_once (dirname( __FILE__ ) . "/admin/theme-styles.php" );
    //Theme scripts
    require_once (dirname( __FILE__ ) . "/admin/theme-scripts.php" );





    /*---------------------------------------
    ---------Dignity Initialiszation---------
    -----------------------------------------*/
    function dignity_setup()
    {

    register_nav_menu('primary', __( 'Primary Navigation','dignitylang'));
    register_nav_menu('dignity_nav', __( 'Dignity Navigation','dignitylang'));

    add_theme_support('post-thumbnails' );
    add_theme_support('post-thumbnails', array('dignity_portfolio','post') );
    set_post_thumbnail_size( 300, 300, true ); // Standard Size Thumbnails
    //Feed links
    add_theme_support( 'automatic-feed-links' );
    //Nav menu


    //Sidebar
    $args = array(
    'name' => __( 'Dignity Sidebar', 'dignitylang' ),
    'id' => 'dignity_side',
    'description' => '',
    'class' => '',
    'before_widget' => '<div id="%1$s" class="widget %2$s side_block">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="sub-heading"><span class="highlight-txt">',
    'after_title' => '</span></h4>' );
    register_sidebar( $args );
    //Content width
    if ( ! isset( $content_width ) ) $content_width = 900;
    //Initiate custom post types
    add_action( 'init', 'dignity_portfolio_type' );
    add_action( 'init', 'dignity_slider_type' );


    //Load the text domain
    load_theme_textdomain('dignitylang', get_template_directory() . '/languages');
    }

    add_action( 'after_setup_theme', 'dignity_setup' );


    /*---------------------------------------
    --------Script and Style Enqueue---------
    -----------------------------------------*/
    global $dignity_pagenow;
    if (!is_admin() AND 'wp-login.php' != $dignity_pagenow)
    {

    add_action( 'wp_enqueue_scripts', 'dignity_scripts' );
    add_action( 'wp_enqueue_scripts', 'dignity_styles' );
    }

    add_action( 'admin_enqueue_scripts', 'dignity_admin_scripts' );
    add_action( 'admin_enqueue_scripts', 'dignity_admin_styles' );
    wp_enqueue_style('thickbox');
    wp_enqueue_script('thickbox');

    if ( is_singular() ) wp_enqueue_script( "comment-reply" );




    /*---------------------------------
    Important Plugin Activation Check
    -----------------------------------*/
    function dignity_plugin_error(){
    echo '<div class="error">
    <p>Current theme needs <strong>Dignity-Shortcodes</strong> Plugin to work properly.</p>
    </div>';
    }
    function metabox_plugin_error(){
    echo '<div class="error">
    <p>Current theme needs <strong>Meta-box</strong> Plugin activated to work properly.</p>
    </div>';
    }
    include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
    if(is_plugin_active('dignity-shortcodes/shortcodes.php'))
    {
    }
    else{
    add_action('admin_notices', 'dignity_plugin_error');
    }

    //Post formats
    add_theme_support(
    'post-formats', array(
    'image',
    'audio',
    'link',
    'quote',
    'video'
    )
    );

    function dignity_is_home_page(){
    if(is_front_page())
    {
    if(is_page_template('the-onepage.php'))
    {
    $is_home = true;
    }
    else
    {
    $is_home = false;
    }
    }
    else
    {
    $is_home = false;
    }

    return $is_home;
    }

    function dignity_favicon(){

    $options = get_option('dignity_wp');

    if($options['fav_icon'] != '')
    {

    $fav_icon = '<link rel="shortcut icon" href="'.$options['fav_icon'].'">';

    }
    else
    {
    $fav_icon = '';
    }

    echo $fav_icon;
    }

    function dignity_color_scheme(){

    require_once(get_template_directory().'/color-scheme.php');
    }

    function dignity_custom_style(){

    $options = get_option('dignity_wp');
    $custom_style = '';
    if($options['additional_css'] != '')
    {
    $custom_style = '<style>'.$options['additional_css'].'</style>';
    }

    echo $custom_style;
    }


    function dignity_IE_fix()
    {
    $ie_fix = '<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link href="'. get_stylesheet_directory_uri() .'/stylesheets/ie8.css" rel="stylesheet">
    <![endif]-->';

    return $ie_fix;
    }





    /*---------------------------------------
    ---------Customised Menu-----------------
    -----------------------------------------*/
    function dignity_sliding_menu()
    {
    $locations = get_nav_menu_locations();
    $is_home = dignity_is_home_page();

    if ($is_home == false)
    {
    $nav_class = " inner-page";
    $root_url = site_url();
    $scroll_class = '';
    }
    else
    {
    $nav_class = " front-page";
    $root_url = '';
    $scroll_class = 'scroll';
    }

    if(!isset($locations['dignity_nav']))
    {
    $return = '<h3 class="clearfix white-txt '.$nav_class.'">Please configure the navigation menu</h3>';
    }
    else
    {
    $menu = wp_get_nav_menu_object($locations['dignity_nav']);

    $return = '';

    if(empty($menu))
    {
    $return = '<h3 class="clearfix white-txt '.$nav_class.'">Please configure the navigation menu</h3>';
    }

    else
    {
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    _wp_menu_item_classes_by_context( $menu_items );

    $return = '<div id="dignity-sliding-navi" class="clearfix dignity-sliding-nav '.$nav_class.'">' . "\n";

    $menunu = array();
    foreach((array)$menu_items as $key => $menu_item )
    {
    $menunu[ (int) $menu_item->db_id ] = $menu_item;
    }
    unset($menu_items);

    foreach ( $menunu as $i => $men ){
    if($men->menu_item_parent == '0')
    {
    //Specific additions
    $submenu_icon = '';
    $has_sub_menu = 0;
    foreach ( $menunu as $submenu )
    {
    if($submenu->menu_item_parent == $men->ID)
    {
    $has_sub_menu = 1;
    $submenu_icon = '<span class="submenu-icon">+</span> ';
    }
    }

    if(( 'page' == $men->object ))
    {
    $incl_onepage = get_post_meta($men->object_id,'one_page',true);
    $small_title = strtolower(preg_replace('/\s+/', '-', $men->post_excerpt));

    if($incl_onepage == 'yes' OR $incl_onepage == 'Yes')
    {
    $href = $root_url.'#id'.$small_title;
    $identifyClass = $scroll_class." is_onepage";
    $link_target = '';
    }
    else
    {
    $href = $men->url;
    $identifyClass = "not_onepage";
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    }
    else
    {
    $href = $men->url;
    $identifyClass = "not_onepage";
    $small_title = strtolower(preg_replace('/\s+/', '-', $men->title));
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    $return .= '<a href="'. $href .'" '.$link_target.' class="'.$identifyClass.'" data-soffset="0">'.$submenu_icon. $men->title .'</a>';



    if($has_sub_menu == 1)
    {
    $return .= '<div class="submenu-wrap">' . "\n";

    foreach ( $menunu as $submenu )
    {
    if($submenu->menu_item_parent == $men->ID)
    {
    if(( 'page' == $submenu->object ))
    {
    $incl_onepage = get_post_meta($submenu->object_id,'one_page',true);
    $small_title = strtolower(preg_replace('/\s+/', '-', $submenu->post_excerpt));

    if($incl_onepage == 'yes' OR $incl_onepage == 'Yes')
    {
    $href = $root_url.'#id'.$small_title;
    $identifyClass = $scroll_class." is_onepage";
    $link_target = '';
    }
    else
    {
    $href = $submenu->url;
    $identifyClass = "not_onepage";
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    }
    else
    {
    $href = $submenu->url;
    $identifyClass = "not_onepage";
    $small_title = strtolower(preg_replace('/\s+/', '-', $submenu->title));
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    $return .= '<a href="'. $href .'" '.$link_target.' class="'.$identifyClass.'" data-soffset="0">'. $submenu->title .'</a>';

    }
    }
    $return .= '</div>' . "\n";
    }

    }
    }

    unset($menunu);
    $return .= '</div>' . "\n";
    }
    }
    echo $return;
    }



    function dignity_std_nav()
    {
    $locations = get_nav_menu_locations();
    $is_home = dignity_is_home_page();

    if ($is_home == false)
    {
    $nav_class = " inner-page";
    $root_url = site_url();
    $scroll_class = '';
    }
    else
    {
    $nav_class = " front-page";
    $root_url = '';
    $scroll_class = 'scroll';
    }

    if(!isset($locations['dignity_nav']))
    {
    $return = '<h3 class="clearfix white-txt '.$nav_class.'">Please configure the navigation menu</h3>';
    }
    else
    {
    $menu = wp_get_nav_menu_object($locations['dignity_nav']);

    $return = '';

    if(empty($menu))
    {
    $return = '<h3 class="clearfix white-txt '.$nav_class.'">Please configure the navigation menu</h3>';
    }

    else
    {
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    _wp_menu_item_classes_by_context( $menu_items );

    $return = '<ul id="standard-nav" class="standard-nav visible-lg '.$nav_class.'">' . "\n";

    $menunu = array();
    foreach((array)$menu_items as $key => $menu_item )
    {
    $menunu[ (int) $menu_item->db_id ] = $menu_item;
    }
    unset($menu_items);

    foreach ( $menunu as $i => $men ){
    if($men->menu_item_parent == '0')
    {
    //Specific additions

    $has_sub_menu = 0;
    foreach ( $menunu as $submenu )
    {
    if($submenu->menu_item_parent == $men->ID)
    {
    $has_sub_menu = 1;

    }
    }

    if(( 'page' == $men->object ))
    {
    $incl_onepage = get_post_meta($men->object_id,'one_page',true);
    $small_title = strtolower(preg_replace('/\s+/', '-', $men->post_excerpt));

    if($incl_onepage == 'yes' OR $incl_onepage == 'Yes')
    {
    $href = $root_url.'#id'.$small_title;
    $identifyClass = $scroll_class." is_onepage";
    $link_target = '';
    }
    else
    {
    $href = $men->url;
    $identifyClass = "not_onepage";
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    }
    else
    {
    $href = $men->url;
    $identifyClass = "not_onepage";
    $small_title = strtolower(preg_replace('/\s+/', '-', $men->title));
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    $return .='<li>';
    $return .= '<a href="'. $href .'" '.$link_target.' class="'.$identifyClass.'" data-soffset="0">'. $men->title .'</a>';



    if($has_sub_menu == 1)
    {
    $return .= '<ul class="submenu-wrap">' . "\n";

    foreach ( $menunu as $submenu )
    {
    if($submenu->menu_item_parent == $men->ID)
    {
    if(( 'page' == $submenu->object ))
    {
    $incl_onepage = get_post_meta($submenu->object_id,'one_page',true);
    $small_title = strtolower(preg_replace('/\s+/', '-', $submenu->post_excerpt));

    if($incl_onepage == 'yes' OR $incl_onepage == 'Yes')
    {
    $href = $root_url.'#id'.$small_title;
    $identifyClass = $scroll_class." is_onepage";
    $link_target = '';
    }
    else
    {
    $href = $submenu->url;
    $identifyClass = "not_onepage";
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    }
    else
    {
    $href = $submenu->url;
    $identifyClass = "not_onepage";
    $small_title = strtolower(preg_replace('/\s+/', '-', $submenu->title));
    if($men->target != '')
    {
    $link_target = 'target="_blank"';
    }
    else{
    $link_target = '';
    }
    }
    $return .= '<li><a href="'. $href .'" '.$link_target.' class="'.$identifyClass.'" data-soffset="0">'. $submenu->title .'</a><li>';

    }
    }
    $return .= '</ul>' . "\n";
    }
    $return .= '</li>' . "\n";
    }
    }

    unset($menunu);
    $return .= '</ul>' . "\n";
    }
    }
    echo $return;
    }





    /* CUSTOM EXCERPTS */

    function dignity_clean($excerpt, $substr=0) {
    $string = strip_tags(str_replace('[...]', '...', $excerpt));
    if ($substr>0) {
    $string = substr($string, 0, $substr);
    }
    return $string;
    }


    /* PAGINATION */


    function dignity_getpagenavi(){
    ?>
    <div id="blog_pagination" class="blog_pagination pad-bottom-medium">
    <?php if(function_exists('wp_pagenavi')) : ?>
    <?php wp_pagenavi(); ?>
    <?php else : ?>
    <div class="older pagenavi-holder"><?php next_posts_link(__('Older Entries','dignitylang')) ?></div>
    <div class="newer pagenavi-holder"><?php previous_posts_link(__('Newer Entries','dignitylang')) ?></div>
    <div class="clear"></div>
    <?php endif; ?>

    </div>

    <?php
    }




    /*---------------------------------------
    ---------Format comment Callback-----------
    -----------------------------------------*/

    function format_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?>>
    <article id="comment-<?php comment_ID(); ?>" class="panel clearfix cmntparent <?php
    $authID = get_the_author_meta('ID');

    if($authID == $comment->user_id)
    echo "cmntbyauthor";
    else
    echo "";
    ?>">
    <div class="comment">


    <div class="avatarbox">
    <?php
    $defimg = get_stylesheet_directory_uri(). "/assets/img/human.png";
    if(get_avatar($comment)):
    echo get_avatar($comment,$size='75');
    else:
    ?>
    <img src="<?php echo $defimg; ?>" alt="avatar" />
    <?php endif; ?>
    </div>
    <div class="cmntbox">
    <?php printf(__('<h4 class="">%s</h4>'), get_comment_author_link()) ?>
    <time datetime="<?php echo comment_time('Y-m-j'); ?>"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php comment_time('F jS, Y'); ?> </a></time>

    <?php edit_comment_link(__('Edit','dignitylang'),'<span class="edit-comment">', '</span>'); ?>

    <?php if ($comment->comment_approved == '0') : ?>
    <div class="alert-box success">
    <?php _e('Your comment is awaiting moderation.','dignitylang') ?>
    </div>
    <?php endif; ?>

    <?php comment_text() ?>

    <!-- removing reply link on each comment since we're not nesting them -->
    <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
    </div>


    </div>
    </article>

    <?php
    }
    function awesome_comment_form_submit_button($button)
    {
    $button =
    '<input name="submit" type="submit" class="form-submit" tabindex="5" id="[args:id_submit]" value="[args:label_submit]" />' .
    get_comment_id_fields();
    return $button;
    }
    add_filter('comment_form_submit_button', 'awesome_comment_form_submit_button');

    function dignity_get_rgb($hex) {
    $hex = str_replace("#", "", $hex);

    if(strlen($hex) == 3) {
    $r = hexdec(substr($hex,0,1).substr($hex,0,1));
    $g = hexdec(substr($hex,1,1).substr($hex,1,1));
    $b = hexdec(substr($hex,2,1).substr($hex,2,1));
    } else {
    $r = hexdec(substr($hex,0,2));
    $g = hexdec(substr($hex,2,2));
    $b = hexdec(substr($hex,4,2));
    }
    $rgb = array($r, $g, $b);
    //return implode(",", $rgb); // returns the rgb values separated by commas
    return $rgb; // returns an array with the rgb values
    }



    function dignity_gradient($HexFrom, $HexTo, $ColorSteps) {
    $FromRGB['r'] = hexdec(substr($HexFrom, 0, 2));
    $FromRGB['g'] = hexdec(substr($HexFrom, 2, 2));
    $FromRGB['b'] = hexdec(substr($HexFrom, 4, 2));

    $ToRGB['r'] = hexdec(substr($HexTo, 0, 2));
    $ToRGB['g'] = hexdec(substr($HexTo, 2, 2));
    $ToRGB['b'] = hexdec(substr($HexTo, 4, 2));

    $StepRGB['r'] = ($FromRGB['r'] - $ToRGB['r']) / ($ColorSteps - 1);
    $StepRGB['g'] = ($FromRGB['g'] - $ToRGB['g']) / ($ColorSteps - 1);
    $StepRGB['b'] = ($FromRGB['b'] - $ToRGB['b']) / ($ColorSteps - 1);

    $GradientColors = array();

    for($i = 0; $i <= $ColorSteps; $i++) {
    $RGB['r'] = floor($FromRGB['r'] - ($StepRGB['r'] * $i));
    $RGB['g'] = floor($FromRGB['g'] - ($StepRGB['g'] * $i));
    $RGB['b'] = floor($FromRGB['b'] - ($StepRGB['b'] * $i));

    $HexRGB['r'] = sprintf('%02x', ($RGB['r']));
    $HexRGB['g'] = sprintf('%02x', ($RGB['g']));
    $HexRGB['b'] = sprintf('%02x', ($RGB['b']));

    $GradientColors[] = implode(NULL, $HexRGB);
    }
    $GradientColors = array_filter($GradientColors, "len");
    return $GradientColors;
    }

    function len($val){
    return (strlen($val) == 6 ? true : false );
    }

    ?>





  • 我跪求下JS下载地址好吗?

  • http://www.helloweba.com/demo/scrollto/jquery.scrollTo.js 其中***为.COM

  • http://www.helloweba.com/demo/scrollto/jquery.scrollTo.js

  • $(this).css() 或者 $(this).addClass()

  • xxxxx

  • 我怎么让他切换的时候,导航条高亮显示呢

  • 我想让它上下滚动,为什么左右跑啊

  • 我跪求下JS下载地址好吗?

  • GOOD 代码简洁干净 容易让人明了!

  • 这个功能太好用了 非常感谢