ถามการประยุกต์ link ในหน้าเดียวกันหน่อยครับ

kunnarakkup · 15 กันยายน 2016, 13:29:27

ถามการประยุกต์ link ในหน้าเดียวกันหน่อยครับ
เช่นหน้า index มี memu abpout กับ product แล้วหน้า index มีข้อมูล about กับ product อยู่ด้วย แล้ว พอคลิกที่product แล้วscrollbarวิ่งไปที่ข้อมูล product นี้ทำไงครับ แบบว่า ให้มันเลื่อนช้าๆอะครับ แบบที่ผมทำเหมือนกับว่ามันวาบไปที่ข้อมูล product

แบบนี้อะครับตัวอย่าง
http://demo.astemplates.com/joomla-templates/002070/index.php#featured-row

อันนี้ที่ผมเขียนอย่างงายๆเลยครับ

html

<div class="menu">
<ul>
<li> <a href="#top">Go to Top</a> </li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
<li><a href="#">home 5</a></li>
</ul>
</div>
<article >
<br><br><br><br>
<img src="hydroperse/hydroperse/hydroperse/1350040782.jpg" width="640" height="480" border="0" alt=""><br>
<img src="hydroperse/hydroperse/hydroperse/20140403152110DSC_0320.JPG" width="640" height="430" border="0" alt="">
<img src="hydroperse/hydroperse/hydroperse/demo/1.index.jpg" width="2494" height="8582" border="0" alt="">
<a name="top">top</a>

css

<style>
.menu ul li { list-style:none; float:left;padding-left:50px; #cc0066 }
.menu {position: fixed}

</style>

EyeShild21 · 15 กันยายน 2016, 13:32:35

ใช้ Jquery ครับ ตัวอย่าง http://alvarotrigo.com/fullPage/#firstPage

kunnarakkup · 15 กันยายน 2016, 13:37:16

อ้างถึงจาก: EyeShild21 ใน 15 กันยายน 2016, 13:32:35
ใช้ Jquery ครับ ตัวอย่าง http://alvarotrigo.com/fullPage/#firstPage

ฟังชั่นนี้เค้าเรียกว่าอะไรอะครับ

EyeShild21 · 15 กันยายน 2016, 13:42:16

อ้างถึงจาก: kunnarakkup ใน 15 กันยายน 2016, 13:37:16
อ้างถึงจาก: EyeShild21 ใน 15 กันยายน 2016, 13:32:35
ใช้ Jquery ครับ ตัวอย่าง http://alvarotrigo.com/fullPage/#firstPage

ฟังชั่นนี้เค้าเรียกว่าอะไรอะครับ

ถ้าผมค้นหาจะใช้คำว่า onepage scroll jquery พวกนี้ ลืมชื่อเหมือนกัน หรือ jquery scroll anchor text

ใช้โค๊ดนี้ก้อได้ครับ ผมลองละใช้ได้เลย

โค้ด เลือก

$( document ).ready(function() {
    $('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});
});

แต่ข้างล่างของท่านต้องใส่
<a id="top">top</a>
แบบนี้ครับ

ถ้าตามโค๊ดท่านก้อแบบนี้ลองเล่นได้เลยครับ

โค้ด เลือก

 <html>
 <head>
   <style>
.menu ul li { list-style:none; float:left;padding-left:50px; #cc0066 }
.menu {position: fixed}   

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
    $('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});
});

</script>
 </head>
 <body>
 <div class="menu">
 <ul>
 <li> <a href="#top">Go to Top</a>  </li>
  <li><a href="#">home 2</a></li>
  <li><a href="#">home 3</a></li>
  <li><a href="#">home 4</a></li>
  <li><a href="#">home 5</a></li>
 </ul>
 </div>
<article >
<br><br><br><br>
<img src="hydroperse/hydroperse/hydroperse/1350040782.jpg" width="640" height="480" border="0" alt=""><br>
<img src="hydroperse/hydroperse/hydroperse/20140403152110DSC_0320.JPG" width="640" height="430" border="0" alt="">
<img src="hydroperse/hydroperse/hydroperse/demo/1.index.jpg" width="2494" height="8582" border="0" alt="">
<a id="top">top</a>



css


 </body>
 </html>

kunnarakkup · 15 กันยายน 2016, 13:57:43

อ้างถึงจาก: EyeShild21 ใน 15 กันยายน 2016, 13:42:16
อ้างถึงจาก: kunnarakkup ใน 15 กันยายน 2016, 13:37:16
อ้างถึงจาก: EyeShild21 ใน 15 กันยายน 2016, 13:32:35
ใช้ Jquery ครับ ตัวอย่าง http://alvarotrigo.com/fullPage/#firstPage

ฟังชั่นนี้เค้าเรียกว่าอะไรอะครับ

ถ้าผมค้นหาจะใช้คำว่า onepage scroll jquery พวกนี้ ลืมชื่อเหมือนกัน หรือ jquery scroll anchor text

ใช้โค๊ดนี้ก้อได้ครับ ผมลองละใช้ได้เลย
โค้ด เลือก ขยาย
$( document ).ready(function() { $('a[href*=#]').click(function(event){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); event.preventDefault(); }); });
แต่ข้างล่างของท่านต้องใส่
<a id="top">top</a>
แบบนี้ครับ

ถ้าตามโค๊ดท่านก้อแบบนี้ลองเล่นได้เลยครับ
โค้ด เลือก ขยาย
<html> <head> <style> .menu ul li { list-style:none; float:left;padding-left:50px; #cc0066 } .menu {position: fixed} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $( document ).ready(function() { $('a[href*=#]').click(function(event){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); event.preventDefault(); }); }); </script> </head> <body> <div class="menu"> <ul> <li> <a href="#top">Go to Top</a> </li> <li><a href="#">home 2</a></li> <li><a href="#">home 3</a></li> <li><a href="#">home 4</a></li> <li><a href="#">home 5</a></li> </ul> </div> <article > <br><br><br><br> <img src="hydroperse/hydroperse/hydroperse/1350040782.jpg" width="640" height="480" border="0" alt=""><br> <img src="hydroperse/hydroperse/hydroperse/20140403152110DSC_0320.JPG" width="640" height="430" border="0" alt=""> <img src="hydroperse/hydroperse/hydroperse/demo/1.index.jpg" width="2494" height="8582" border="0" alt=""> <a id="top">top</a> css </body> </html>

ขอบคุณมากครับ กำลังมีงานออกแบบเว็บบริษัทใหม่ ผมจะทำแบบ ตัวอย่างที่ลงไว้อะครับ กำลังไล่หาฟังชั่น แบบในเว็บตัวอย่างอยู่ครับ ตัวอย่างเป็น joomla เหมือนต้องซื้อ theme อะครับ ผมก็ซื้อไม่เป็น

nongkai27 · 16 กันยายน 2016, 15:28:27

กำลังหาอยู่พอดีเลย ขอบคุณค่ะ

Gangzaa! · 16 กันยายน 2016, 15:39:23

ขอบคุณครับ กำลังหาเหมือนกัน...

ถามการประยุกต์ link ในหน้าเดียวกันหน่อยครับ

kunnarakkup

EyeShild21

kunnarakkup

EyeShild21

kunnarakkup

nongkai27

Gangzaa!