網頁問題QQ 想要點擊按鈕滑到指定DIV區塊

網頁設計 js動態

兔子兔子 2019-08-05 17:06:10 ‧ 2484 瀏覽

分享至

如標題~
想要點擊按鈕後滑到指定區塊
但一直沒辦法讓他有滑動的效果，想請問是哪邊出錯了
(本人JS新手，程式碼為網路上搜尋後混著用QQ)

<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  $(function(){
 var timer= 700;
    $('#about').click(function () {
    $("html,body").animate({ scrollTop: $('#about').offset().top}, timer);
    return false;
});

</script>

dragonH iT邦超人 5 級 ‧ 2019-08-05 17:07:24 檢舉

首先

code 不要貼圖

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-08-05 17:19:53

codepen

這樣嗎?

你的問題在於 id 給錯

const timer = 700;
$('#about').click(() => {
  $('html, body').animate({ scrollTop: $('#faq').offset().top }, timer);
})

回應 17
分享
檢舉

看更多先前的回應...收起先前的回應...

兔子兔子 iT邦新手 5 級 ‧ 2019-08-05 17:28:00 檢舉

改了還是不能滑動

dragonH iT邦超人 5 級 ‧ 2019-08-05 17:31:36 檢舉

我的 codepen 正常阿

或許你可以補上 html code

兔子兔子 iT邦新手 5 級 ‧ 2019-08-05 17:32:41 檢舉

<style type="text/css">
	
	.box{height:300px;background-color: #DFD928;}
	.box1{height:300px;background-color: #DF8E28;}
</style>


<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  $(function(){

var timer= 700;

    $('#about').click(function () {
    $("html,body").animate({ scrollTop: $('#faq').offset().top}, timer);
    return false;
});

</script>

	<div id="faq">滑到這</div>

兔子兔子 iT邦新手 5 級 ‧ 2019-08-05 17:33:26 檢舉

為什麼貼完會切塊啊OAO

dragonH iT邦超人 5 級 ‧ 2019-08-05 17:34:14 檢舉

你可能需要用
```
```
包住

然後你可以看一下

瀏覽器 f12 console

你一開始的寫法

那邊有報錯

兔子兔子 iT邦新手 5 級 ‧ 2019-08-05 17:36:11 檢舉

這邊要怎麼貼body的部分? 我從sublime複製過來有幾行消失了

兔子兔子 iT邦新手 5 級 ‧ 2019-08-05 17:36:38 檢舉

<body>
	 <a href="#faq" id="about">點我
	 	<div class="box"></div>
	 	<div class="box1"></div>
	 	<div class="box"></div>
	 	<div class="box1"></div>
	 	<div class="box"></div>
	 	<div class="box1"></div></a>

   		<div id="faq">滑到這</div>	
</body>

兔子兔子 iT邦新手 5 級 ‧ 2019-08-05 17:36:48 檢舉

有了感謝~

兔子兔子 iT邦新手 5 級 ‧ 2019-08-05 17:39:26 檢舉

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">		
		.box{height:300px;background-color: #DFD928;}
		.box1{height:300px;background-color: #DF8E28;}
	</style>

	<script src="jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
	  $(function(){
 var timer= 700;
 
        $('#about').click(function () {
        $("html,body").animate({ scrollTop: $('#faq').offset().top}, timer);
        return false;
    });
	</script>
</head>
<body>
	 <a href="#faq" id="about">點我
	 	<div class="box"></div>
	 	<div class="box1"></div>
	 	<div class="box"></div>
	 	<div class="box1"></div>
	 	<div class="box"></div>
	 	<div class="box1"></div></a>
   		<div id="faq">滑到這</div>	
</body>
</html>

dragonH iT邦超人 5 級 ‧ 2019-08-05 17:40:41 檢舉

你的 js

少了 })

$(function(){
  var timer= 700;
  $('#about').click(function () {
    $("html,body").animate({ scrollTop: $('#faq').offset().top}, timer);
    return false;
  });
})