html导航栏背景图片 页面导航栏滚动时改变导航栏背景样式及回到顶部

页面导航栏滚动时改变导航栏背景样式

html：

Demo

.hero{

padding-top: 409px;

}

Home

Feature

Overview

Pricing

Team

blog

Download

aaaa

bbb

返回顶部：

1、在压面 body 中的任何地方加入一下代码

回到顶部

回到底部

在head中加入css

#scroll {position:fixed; top:300px; right:100px;z-index:999}

.scrollItem {width:20px; height:70px;border:#e1e1e1 1px solid; cursor: pointer; text-align: center; padding-top: 10px;}

当然你也可以定义自己的外观，可以放上一张图片来替代，关键的是保持id与js代码中一致，而且要将滚动导航层的position设置为fixed，这样当我们拖动滚动条的时候，滚动导航层才不会动。

2、引入jqeury库文件

$( function () {

var speed = 1000;//自定义滚动速度

//回到顶部

$("#scroll").hide();

$(window).scroll(function(event){

if( $(window).scrollTop() === 0 ){

$("#scroll").hide();

}else{

$("#scroll").show();

}

});

$( "#toTop").click( function () {

$( "html,body").animate({ "scrollTop" : 0 }, speed);

});

});

在以上的JS代码中，我们可以自定义滚动速度，speed值越大，滚动越快

var speed = 1000;

那么你的页面便实现了回到顶部和底部的功能。

在此我还要多添加一个功能，那就是滑动到指定ID的元素，语法如下。需要把scrollTop设置为

$(‘#ID’).offset().top