關於錨點連接跳轉---實例一

時間 2020-05-28

標籤關於連接實例简体版

原文原文鏈接

做爲前端開發人員，對於選項卡或者tab切換，都應該不陌生。都知道其是如何實現。在這裏就很少說了。javascript

在這裏小碼哥想說的是一種純HTML結構可實現另外一種方式的內容切換。那就是利用超連接實現錨點點擊跳轉。a元素做爲一種特殊且很是重要的標籤。其不僅僅體如今地址的連接等等上。其還有一種功能就是依據ID進行定點查找跳轉。很神奇吧，，，，，，css

其實現原理：一、目標元素得有一個ID值。二、a標籤中的href得有和目標元素相同的#+ID值。html

廢話很少說，直接上實例：前端

HTML部分：java

<!doctype html>jquery

<html>ide

<head>ui

<title>利用錨點點擊跳轉</title>spa

.content{width:1000px;margin:0 auto;}

.cont{height:500px;}

.cont1{background:#666666;}

.cont2{background:#999999;}

.cont3{background:#CCCCCC;}

.cont4{background:#FF0000;}

.cont5{background:#6699CC;}

.cont h4{font-size:16px;}

.pop{width:100px;height:200px;border:1px #00FFFF solid;position:fixed;top:50%;margin-top:-100px;right:50px;list-style:none;margin:0;padding:0;}

.pop li{width:100px;}

.pop li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

.pop li a:hover{background:#6699CC;color:#00FFCC;}

</style>

</head>

<body>

</div>

</ul>

</body>

</html>

上面的代碼是純HTML+CSS就能搞定的簡單的機械的錨點點擊跳轉實例。有興趣的朋友，能夠本身Copy一下試試。

固然，若是有興趣的盆友還想讓效果更炫一點，不妨試試添加上下面的JS代碼。會有意想不到的效果哦。嘎嘎

JS:

$(document).ready(function(){

$("ul.pop li a").click(function() {

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

scrollTop: $($(this).attr("href")).offset().top + "px"

}, 500);

return false;

});

</script>

這樣你會發現，慢一點，動感就會強一點。是仍是不是？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。