html5锚点平滑,jquery实现页面内链接锚点跳转平滑滚动效果

jQuery下实现锚点链接的平滑滚动(带浮动侧边栏)

css+html+js

* {

margin: 0;

padding: 0;

}

body {

font-size: 12px;

line-height: 1.7;

}

li {

list-style: none;

}

#content {

width: 800px;

margin: 0 auto;

padding: 20px;

}

#content h1 {

color: #0088bb;

}

#content .item {

padding: 20px;

margin-bottom: 20px;

border: 1px dotted #0088bb;

}

#content .item h2 {

font-size: 16px;

font-weight: bold;

border-bottom: 2px solid #0088bb;

margin-bottom: 10px;

}

#content .item li {

display: inline;

margin-right: 10px;

}

#content .item li a img {

width: 230px;

height: 230px;

border: none;

}

#menu {

position: fixed;

top: 120px;

right: 180px;

}

#menu ul li a {

display: block;

margin: 5px 0;

font-size: 14px;

font-weight: bold;

color: #333;

width: 80px;

height: 50px;

line-height: 50px;

text-decoration: none;

text-align: center;

}

#menu ul li a:hover,

#menu ul li a.current {

color: #fff;

background: #0088bb;

}

/*ie6 hack*/

* html,

* html body {

background-image: url(about:blank);

background-attachment: fixed;

}

* html #menu {

/*position: fixed;*/

position: absolute;

top: expression(((e=document.documentElement.scrollTop)?e: document.body.scrollTop)+100+'px');

}

$(document).ready(function() {

$(window).on('scroll', function() {

var scrollTop = $(document).scrollTop();

var menu = $("#menu");

var items = $("#content").find(".item");

var currentId = "";

items.each(

function() {

var im = $(this);

var itemTop = im.offset().top;

//console.log(itemTop);

if (scrollTop > (itemTop - 188)) {

currentId = "#" + im.attr("id");

} else {

return false;

}

});

var currentLink = menu.find(".current");

if (currentId && currentLink.attr("href") != currentId) {

currentLink.removeClass("current");

menu.find("a[href=" + currentId + "]").addClass("current");

}

})

var $a = $("a[href*='item']");

/* $a[1].οnclick=function(){

console.log('123');

}*/

$a.each(

function() {

console.log(this);

$(this).on('click',

function() {

$('html,body').animate({

scrollTop: $($.attr(this, 'href')).offset().top

}, 500);

return false;

})

}

)

});

• 1F 男装
• 2F 女装
• 3F 美妆
• 4F 数码
• 5F 母婴

地狗购物网

1F 男装

• 

• 

• 

• 

• 

• 

• 

• 

• 

2F 女装

• 

• 

• 

• 

• 

• 

• 

• 

• 

3F 美妆

• 

• 

• 

• 

• 

• 

• 

• 

• 

4F 数码

• 

• 

• 

• 

• 

• 

• 

• 

• 

5F 母婴

• 

• 

• 

• 

• 

• 

• 

• 

• 

JQuery实现简单的平滑过渡效果

$(document).ready(function() {

var $root = $('html, body'); //选择器缓存起来。这样每次点击时就不需要再重新查找了

$('a').click(function() {

var href = $.attr(this, 'href');

$root.animate({

scrollTop: $(href).offset().top

}, 500, function () {

window.location.hash = href;

});

return false;

});

});

JQuery实现平滑过渡效果

改进版 好处是点击锚点链接平滑滚动到锚点，并且浏览器URL后缀不带有锚点字样

$(document).ready(function() {

$('a[href*=#],area[href*=#]').click(function() {

if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({

scrollTop: targetOffset

},

1000);

return false;

}

}

});

});